Element: <oj-tag-cloud-item>

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 5.2.0
Since:
  • 5.2.0
Module:
  • ojtagcloud

JET Tag Cloud Item

The oj-tag-cloud-item element is used to declare properties for tag cloud items and is only valid as the child of a template element for the itemTemplate slot of oj-tag-cloud.


<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item  label='[[item.data.id]]' value='[[item.data.total]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

Attributes

categories :Array.<string>

An array of category strings corresponding to the tag cloud items. This allows highlighting and filtering of items.
Default Value:
  • []
Example

Initialize tag cloud item with the categories attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item categories='[[item.data.categories]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

color :string

The color of the text. Will be overridden by any color defined in the style option. The default value comes from the CSS and varies based on theme.
Default Value:
  • ''
Example

Initialize tag cloud item with the color attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item color='[[item.data.color]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

label :string

The text of the item.
Default Value:
  • ""
Example

Initialize tag cloud item with the label attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

short-desc :string

The description of the item. This is used for customizing the tooltip text.
Default Value:
  • ""
Example

Initialize tag cloud item with the short-desc attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item short-desc='[[item.data.id + ":"" + item.data.total + "% of respondents"]]' label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

svg-class-name :string

The CSS style class defining the style of the item text.
Default Value:
  • ""
Example

Initialize tag cloud item with the svg-class-name attribute specified:

<oj-tag-cloud data='[[dataProvider]]'  as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item svg-class-name='[[item.data.svgClassName]]' label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

svg-style :Object

The CSS style object defining the style of the item text.
Default Value:
  • {}
Example

Initialize tag cloud item with the svg-style attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item svg-style='[[item.data.svgStyle]]' label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

url :string

The url this item references.
Default Value:
  • ""
Example

Initialize tag cloud item with the url attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item url='[[item.data.url]]' label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

value :number|null

The value of this item which will be used to scale its font-size within the tag cloud.
Default Value:
  • null
Example

Initialize tag cloud item with the value attribute specified:

<oj-tag-cloud data='[[dataProvider]]' as='item'>
 <template slot='itemTemplate'>
   <oj-tag-cloud-item value='[[item.data.total]]' label='[[item.data.id]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>