Element: <oj-tag-cloud-item>

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 5.2.0
Module:
  • ojtagcloud

QuickNav

Attributes

Other Topics


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]]'>
 <template slot='itemTemplate' data-oj-as='item'>
   <oj-tag-cloud-item  label='[[item.data.id]]' value='[[item.data.total]]'></oj-tag-cloud-item>
 </template>
</oj-tag-cloud>

Migration

Read about current Core Pack limitations to decide when to migrate.
Please make note of the following:

To migrate from oj-tag-cloud-item to oj-c-tag-cloud-item, you need to revise the import statement and references to oj-tag-cloud-item in your app. Please note the changes between the two components below.
svg-class-name attribute

The svg-class-name attribute has been replaced by the item styling attributes in oj-c-tag-cloud-item. Use color to style tag cloud item text and value to scale font size.


Usage

Signature:

interface TagCloudItemElement<K=any>

Generic Parameters
ParameterDescription
KType of key of the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { TagCloudItemElement } from "ojs/ojtagcloud";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojtagcloud";

For additional information visit:


Attributes

categories :Array<string>

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

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:
  • ''

label :string

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

(nullable) short-desc :(string | ((context: ojTagCloud.ItemShortDescContext<K>) => string))

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

svg-class-name :string

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

svg-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the item text. Only SVG CSS style properties are supported.
Deprecated:
Since Description
15.0.0 This is not recommended in the Redwood design system.
Default Value:
  • {}

url :string

The url this item references.

Note: For security, JET validates the URL protocol before navigation and currently supports http: and https: protocols. JET does not validate whether the URL is trusted for the application. Applications are responsible for providing sanitized URLs and enforcing any required origin or host allowlist.

Default Value:
  • ""

value :number|null

The value of this item is used to scale its font size within the tag cloud.
Default Value:
  • null