注目新着
リストAvatar List With Actions
Contact rows with a gradient initials avatar, name, email and a trailing action button.
#list#avatar#actions
3 個のフレームワーク中級
Loading…
A semantic list of rows with a primary label and an optional trailing meta value.
<!--
A real <ul>/<li>, not a stack of <div>s: a screen reader announces "list, 4
items" and lets the user jump the whole block. min-w-0 + truncate on the
primary text is what stops a long label from shoving the meta off-screen at
320px; the meta itself hides below sm rather than wrapping into the label.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Team members">
<li class="flex items-center justify-between gap-3 px-4 py-3">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-gray-900 dark:text-gray-100">Amara Okafor</span>
<span class="hidden shrink-0 text-xs text-gray-500 sm:inline dark:text-gray-400">Owner</span>
</li>
<li class="flex items-center justify-between gap-3 px-4 py-3">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-gray-900 dark:text-gray-100">Bhavesh Ramachandran</span>
<span class="hidden shrink-0 text-xs text-gray-500 sm:inline dark:text-gray-400">Admin</span>
</li>
<li class="flex items-center justify-between gap-3 px-4 py-3">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-gray-900 dark:text-gray-100">Chen Wei</span>
<span class="hidden shrink-0 text-xs text-gray-500 sm:inline dark:text-gray-400">Member</span>
</li>
</ul>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | ListItem[] | - | レンダリングする項目の配列。 |
ariaLabel | string | 'List' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
Feed rows through `items`; the trailing `secondary` hides below `sm` so it never fights the label at 320px - keep it as a redundant hint, not the only place a value lives. `min-w-0` + `truncate` on the primary text is what stops a long label overflowing the row.