Блок

Қосымша title және description бар 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>

Сыртқы header

Шолу

Аккаунт туралы соңғы ақпарат

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

+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	-	Контент үстіндегі қосымша heading.
description	string	-	Heading астындағы қосымша description.
headerPosition	'inside' \| 'outside'	'outside'	Title мен description-ды island ішінде немесе оның рамкасының үстінде орналастырады.
contentClass	string	-	Island ішкі жиектелген контейнеріне арналған қосымша кластар.
default	slot	-	Island body ішінде көрсетілетін контент.