UiListMenuItem

A list row with an icon, a label, an optional hint and a trailing area. It can behave as a link (with a chevron), a toggle row, or a select row, and supports a destructive style.

Ejemplos

Row types

A clickable row (with chevron), a toggle row (tapping anywhere toggles), a row with a hint, and a destructive row.

Profile

Notifications

AboutVersion 1.2.0

Sign out

<UiListMenu class="max-w-sm">
  <UiListMenuItem icon="mdi:account-outline" clickable>Profile</UiListMenuItem>
  <UiListMenuItem icon="mdi:bell-outline" :toggle="state.notify" @update:toggle="state.notify = $event">
    Notifications
    <template #suffix><UiToggle :model-value="state.notify" readonly /></template>
  </UiListMenuItem>
  <UiListMenuItem icon="mdi:information-outline" hint="Version 1.2.0">About</UiListMenuItem>
  <UiListMenuItem icon="mdi:logout" danger clickable :chevron="false">Sign out</UiListMenuItem>
</UiListMenu>

Suffix content

The #suffix slot holds any trailing control — a badge, a value, a select.

Storage

80% full

Theme

System

<UiListMenu class="max-w-sm">
  <UiListMenuItem icon="mdi:cloud-outline" clickable>
    Storage
    <template #suffix><UiBadge color="amber" size="xs">80% full</UiBadge></template>
  </UiListMenuItem>
  <UiListMenuItem icon="mdi:palette-outline" clickable>
    Theme
    <template #suffix><span class="text-xs text-gray-400">System</span></template>
  </UiListMenuItem>
</UiListMenu>

Props

Nombre	Tipo	Por defecto	Descripción
icon	`string`	`''`	Leading MDI icon.
iconClass	`string`	`''`	Class for the icon.
clickable	`boolean`	`false`	Make the row activate on click.
toggle	`boolean`	`undefined`	Render a toggle row bound to this value.
selectRef	`object`	`undefined`	A UiSelect ref to open when the row is tapped.
chevron	`boolean`	`true`	Show the trailing chevron.
danger	`boolean`	`false`	Destructive styling.
disabled	`boolean`	`false`	Disables the row.
hint	`string`	`''`	Secondary text.
size	`string`	`'md'`	Row size. `mdsm`

Eventos

Evento	Datos	Descripción
`click`	`void`	Emitted when a clickable row is activated.
`update:toggle`	`boolean`	Emitted with the new value when a toggle row is tapped.

Slots

Slot	Descripción
`default`	Label text.
`suffix`	Trailing content (toggle, select, badge, …).

Primeros pasos

Actions

Forms

Overlays

Feedback