List Item

Child component of List

API reference

Properties

PropertyAttributeDescriptionTypeDefault
closableclosableWhen true, a close button is added to the component.booleanfalse
closedclosedWhen true, hides the component.booleanfalse
descriptiondescriptionA description for the component. Displays below the label text.string
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
dragDisableddrag-disabledWhen true, the item is not draggable.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.{ close?: string; expand?: string; collapse?: string; }
metadataProvides additional metadata to the component. Primary use is for a filter on the parent calcite-list.{ [x: string]: unknown; }
openopenWhen true, the item is open to show child components.booleanfalse
selectedselectedWhen true and the parent calcite-list's selectionMode is "single", "single-persist"', or "multiple"`, the component is selected.booleanfalse
sortHandleOpensort-handle-openWhen true, displays and positions the sort handle.booleanfalse
unavailableunavailableWhen true, 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
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(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close