API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
closable | closable | When true , a close button is added to the component. | boolean | false |
closed | closed | When true , hides the component. | boolean | false |
description | description | A description for the component. Displays below the label text. | string | |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
dragDisabled | drag-disabled | When true , the item is not draggable. | boolean | false |
iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | |
iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl" ). | "both" | "end" | "start" | |
iconStart | icon-start | Specifies an icon to display at the start of the component. | string | |
label | label | The label text of the component. Displays above the description text. | string | |
messageOverrides | Use this property to override individual strings used by the component. | {
close?: string;
expand?: string;
collapse?: string;
} | ||
metadata | Provides additional metadata to the component. Primary use is for a filter on the parent calcite-list . | {
[x: string]: unknown;
} | ||
open | open | When true , the item is open to show child components. | boolean | false |
selected | selected | When true and the parent calcite-list 's selectionMode is "single" , "single-persist"', or "multiple"`, the component is selected. | boolean | false |
sortHandleOpen | sort-handle-open | When true , displays and positions the sort handle. | boolean | false |
unavailable | unavailable | When true , the component's content appears inactive. | boolean | false |
value | value | The component's value. | any |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-list , calcite-list-item and calcite-list-item-group elements. |
actions-start | A slot for adding actionable calcite-action elements before the content of the component. |
content-start | A slot for adding non-actionable elements before the label and description of the component. |
content | A slot for adding non-actionable, centered content in place of the label and description of the component. |
content-end | A slot for adding non-actionable elements after the label and description of the component. |
actions-end | A slot for adding actionable calcite-action elements after the content of the component. |
content-bottom | A slot for adding content below the component's label and description . |
Styles
Name | Description |
---|---|
--calcite-list-background-color-hover | Specifies the component's background color when hovered. |
--calcite-list-background-color-press | Specifies the component's background color when pressed. |
--calcite-list-background-color | Specifies the component's background color. |
--calcite-list-border-color | Specifies the component's border color. |
--calcite-list-content-text-color | Specifies the content color. |
--calcite-list-description-text-color | Specifies the description color. |
--calcite-list-icon-color | Specifies the component's icon color. |
--calcite-list-label-text-color | Specifies the label color. |
--calcite-list-selection-border-color | Specifies the component's selection border color. |
Events
Name | Description | Behavior |
---|---|---|
calciteListItemClose | Fires when the close button is clicked. | |
calciteListItemSelect | Fires when the component is selected. | |
calciteListItemSortHandleBeforeClose | Fires when the sort handle is requested to be closed and before the closing transition begins. | |
calciteListItemSortHandleBeforeOpen | Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. | |
calciteListItemSortHandleClose | Fires when the sort handle is closed and animation is complete. | |
calciteListItemSortHandleOpen | Fires when the sort handle is open and animation is complete. | |
calciteListItemToggle | Fires when the open button is clicked. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |