List
Calcite List is a general purpose list to construct list items.
Overview
Lists can be grouped, and leverage slots to include actionable or supplemental elements, such as Actions and Icons. Their heading levels can be set to ensure consistent hierarchy in an application.
For a list of selectable items, use Calcite Pick List. For sorting or removing items in a list, use Calcite Value List.
Usage
- Format a series of line items
- Grouping line items
Sample
Edit sample on Codepen
Edit sample on Codepen
API reference
calcite-list
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
disabled | disabled | When true, prevents user interaction. | true false | |
headingLevel | heading-level | Number at which section headings should start for the list. | 1 2 3 4 5 6 |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding `calcite-list-item` elements. |