Блок

Сгруппированный блок Alixan UI с необязательными заголовком и описанием.

Установка

npx alixan-ui-nuxt add island

Использование

Обзор

Последняя информация об аккаунте

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

+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>

<Island
  title="island.demoTitle"
  description="island.demoDesc"
  header-position="inside"
>
  <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-11 rounded-full object-cover" />
      </template>
    </ListTile>
  </List>
</Island>

Заголовок снаружи

Обзор

Последняя информация об аккаунте

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

+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>

<Island
  title="island.demoTitle"
  description="island.demoDesc"
  header-position="outside"
>
  <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-11 rounded-full object-cover" />
      </template>
    </ListTile>
  </List>
</Island>

Справочник API

Свойство	Тип	По умолчанию	Описание
title	string	-	Необязательный заголовок над содержимым.
description	string	-	Необязательное описание под заголовком.
headerPosition	'inside' \| 'outside'	'outside'	Размещает заголовок и описание внутри island или над его рамкой.
contentClass	string	-	Дополнительные классы для внутреннего контейнера Island с рамкой.
default	slot	-	Содержимое основной области блока.