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. | truefalse | |
| headingLevel | heading-level | Number at which section headings should start for the list. | 123456 |
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. |