List
Present related rows in a card, separated by lines so each item is easy to distinguish.
Anna Petrova
anna@work
Ivan Sidorov
ivan@work
Lena Morozova
lena@work
<script setup lang="ts">import { UiCard, UiList, UiListItem, UiAvatar, UiBadge } from 'grani'</script> <template> <UiCard :padded="false" class="w-full max-w-md"> <UiList> <UiListItem title="Anna Petrova" description="anna@work"> <template #media><UiAvatar name="Anna Petrova" /></template> <template #actions><UiBadge tone="success" label="Owner" /></template> </UiListItem> <UiListItem title="Ivan Sidorov" description="ivan@work"> <template #media><UiAvatar name="Ivan Sidorov" /></template> <template #actions><UiBadge label="Editor" /></template> </UiListItem> <UiListItem title="Lena Morozova" description="lena@work"> <template #media><UiAvatar name="Lena Morozova" /></template> <template #actions><UiBadge label="Viewer" /></template> </UiListItem> </UiList> </UiCard></template>
Also called list group, stack of rows.
Usage
<UiList>…</UiList> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name | Description |
|---|---|
| default | The rows: UiListItem, a UiReveal around one, a notice. Each child is one item of the list. |
When to use another component
| When you need | Take |
|---|---|
| A list in a panel | The panel draws it itself, as a Select or a Menu does |
| A table of columns | Table |
| A list that grows from its last row | List field over a List |