Skip to content

List Item

Child component of List

API reference

Properties

PropertyAttributeDescriptionTypeDefault
closableclosableWhen present, a close button is added to the component.booleanfalse
closedclosedWhen present, hides the component.booleanfalse
descriptiondescriptionA description for the component. Displays below the label text.string
disableddisabledWhen present, interaction is prevented and the component is displayed with lower opacity.booleanfalse
dragDisableddrag-disabledWhen present, the item is not draggable.booleanfalse
expandedexpandedWhen present, expands the component and its contents.booleanfalse
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
labellabelThe label text of the component. Displays above the description text.string
messageOverridesUse this property to override individual strings used by the component.Record<string, unknown>
metadataProvides additional metadata to the component. Primary use is for a filter on the parent calcite-list.{ [x: string]: unknown; }
openopen
deprecatedUse expanded prop instead.
When present, the item is open to show child components.
booleanfalse
selectedselectedWhen present and the parent calcite-list's selectionMode is "single", "single-persist"', or "multiple"`, the component is selected.booleanfalse
sortHandleOpensort-handle-openWhen present, displays and positions the sort handle.booleanfalse
unavailableunavailableWhen present, the component's content appears inactive.booleanfalse
valuevalueThe component's value.any

Slots

NameDescription
default (unnamed)A slot for adding calcite-list, calcite-list-item and calcite-list-item-group elements.
actions-startA slot for adding actionable calcite-action elements before the content of the component.
content-startA slot for adding non-actionable elements before the label and description of the component.
contentA slot for adding non-actionable, centered content in place of the label and description of the component.
content-endA slot for adding non-actionable elements after the label and description of the component.
actions-endA slot for adding actionable calcite-action elements after the content of the component.
content-bottomA slot for adding content below the component's label and description.

Styles

NameDescription
--calcite-list-background-color-hoverSpecifies the component's background color when hovered.
--calcite-list-background-color-pressSpecifies the component's background color when pressed.
--calcite-list-background-colorSpecifies the component's background color.
--calcite-list-border-colorSpecifies the component's border color.
--calcite-list-content-text-colorSpecifies the content color.
--calcite-list-description-text-colorSpecifies the description color.
--calcite-list-icon-colorSpecifies the component's icon color.
--calcite-list-label-text-colorSpecifies the label color.
--calcite-list-selection-border-colorSpecifies the component's selection border color.

Events

NameDescriptionBehavior
calciteListItemCloseFires when the close button is clicked.bubblescomposed
calciteListItemCollapseFires when the component's content area is collapsed.bubblescomposed
calciteListItemExpandFires when the component's content area is expanded.bubblescomposed
calciteListItemSelectFires when the component is selected.bubblescomposed
calciteListItemSortHandleBeforeCloseFires when the sort handle is requested to be closed and before the closing transition begins.bubblescomposed
calciteListItemSortHandleBeforeOpenFires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteListItemSortHandleCloseFires when the sort handle is closed and animation is complete.bubblescomposed
calciteListItemSortHandleOpenFires when the sort handle is open and animation is complete.bubblescomposed
calciteListItemToggleFires when the open button is clicked.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(options?: FocusOptions): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.