Список

Строка списка Alixan UI с leading, заголовком, описанием и trailing.

Установка

npx alixan-ui-nuxt add list

Клик

Передача обработчика клика превращает ListTile в кнопку и автоматически добавляет pointer, hover и клавиатурный focus.

<script setup lang="ts">
import { ChevronRight } from '@lucide/vue';

const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];

const toast = useToast();
const openContact = () => toast.open('list.profileOpened', 'info');
</script>

<List divider="inset">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
    @click="openContact"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
    <template #trailing><ChevronRight class="size-5" /></template>
  </ListTile>
</List>

Действия в trailing

Аружан Сарсенова

+7 701 123 45 67

Данияр Алиев

+7 702 234 56 78

Айдана Нурланкызы

+7 705 345 67 89

<script setup lang="ts">
import { Pencil, Trash2 } from '@lucide/vue';

const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];

const toast = useToast();
const editProfile = () => toast.open('list.editStarted', 'info');
const deleteProfile = () => toast.open('list.deleteStarted', 'warning');
</script>

<List>
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
    <template #trailing>
      <IconButton :tooltip="$t('list.edit')" variant="outlined" size="sm" @click="editProfile">
        <Pencil />
      </IconButton>
      <IconButton :tooltip="$t('list.delete')" variant="outlined" color="destructive" size="sm" @click="deleteProfile">
        <Trash2 />
      </IconButton>
    </template>
  </ListTile>
</List>

Граница

Inset добавляет разделитель Alixan UI по линии контента. Block оборачивает каждый ListTile отдельной рамкой.

Inset

Аружан Сарсенова

+7 701 123 45 67

Данияр Алиев

+7 702 234 56 78

Айдана Нурланкызы

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<List divider="inset">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
  </ListTile>
</List>

Block

Аружан Сарсенова

+7 701 123 45 67

Данияр Алиев

+7 702 234 56 78

Айдана Нурланкызы

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<List divider="block">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
  </ListTile>
</List>

Справочник API

Свойство	Тип	По умолчанию	Описание
divider	'inset' \| 'block'	'inset'	Использует внутренние разделители Alixan UI или оформляет каждый tile отдельным блоком.

Свойство	Тип	По умолчанию	Описание
title	string	-	Основной текст строки.
description	string	-	Необязательный поясняющий текст строки.
@click	(event: MouseEvent) => void	-	Делает tile интерактивным и включает pointer, hover и состояние клавиатурного фокуса.

Свойство	Тип	По умолчанию	Описание
leading	slot	-	Контент перед текстом, например иконка или аватар.
title	slot	-	Пользовательское содержимое заголовка.
description	slot	-	Пользовательское содержимое описания.
trailing	slot	-	Контент после текста, например значение или шеврон.