Тізім

Leading, title, description және trailing аймақтары бар Alixan UI тізім жолы.

Орнату

npx alixan-ui-nuxt add list

Клик

Клик өңдеушісін беру ListTile-ды button етіп, pointer, hover және keyboard 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 divider қосады. 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 ішкі divider-лерін қолданады немесе әр tile-ды бөлек блок ретінде көрсетеді.

Қасиет	Түрі	Әдепкі	Сипаттама
title	string	-	Жолдың негізгі мәтіні.
description	string	-	Жолдың қосымша түсіндірме мәтіні.
@click	(event: MouseEvent) => void	-	Tile-ды интерактивті етіп, pointer, hover және keyboard focus күйлерін қосады.

Қасиет	Түрі	Әдепкі	Сипаттама
leading	slot	-	Мәтін алдындағы контент, мысалы icon немесе avatar.
title	slot	-	Кастом title контенті.
description	slot	-	Кастом description контенті.
trailing	slot	-	Мәтіннен кейінгі контент, мысалы value немесе chevron.