Lists
the e-list component is a customizable list component that can have its color, elevation, and items customized through props. The list items can have icons, avatars, titles, subtitles, and values.
model-value: 1
- Item1list example subtitle
- Item2list example subtitle
- Item3list example subtitle
- Item4list example subtitle
Sub group
By combining the e-list and the e-list-group components you can create interactive menus
- Setting
- Users
Props
Explore the available props for the form component
e-list
| Property | Description | Type | Default |
|---|---|---|---|
| disabled | Remove the ability to click on the component | boolean | false |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | primary |
| group | contain the value or values of currently opened groups. Can be two-way bound with v-model:group. if the value is an array, the component will be in multiple mode | (string | number)[] | string | number | undefined |
| model-value | The v-model value of the component. if the value is an array, the component will be in multiple mode | (string | number)[] | string | number | undefined |
| elevated | Add a shadow to the component | boolean | false |
e-list-group
| Property | Description | Type | Default |
|---|---|---|---|
| value | The value of the group. This is the value that will be returned by the list when the group is selected. | string | number | undefined |
e-list-item
| Property | Description | Type | Default |
|---|---|---|---|
| value | The value of the item. This can be a string or a number and is used to determine the selected item. | string | number | undefined |
| append-icon | name or configuration of the icon to be displayed to the right of the component | Array IconPath string | undefined |
| prepend-icon | name or configuration of the icon to be displayed to the left of the component | Array IconPath string | undefined |
| prepend-avatar | Url for the avatar to be displayed to the left of the component | string | undefined |
| append-avatar | Url for the avatar to be displayed to the right of the component | string | undefined |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | primary |
| is-active | Whether or not the item is active. | string | undefined |
| active-class | The class to be applied to the active item. | string | undefined |
| title | The text to be displayed as a title in the item. | string | undefined |
| subtitle | The text to be displayed as a subtitle in the item. | string | undefined |
| tag | The html tag to be used for rendering the item. | string | 'li' |
| disabled | Whether or not the item is disabled. | string | number | undefined |