Accordion

Vertikal joylashgan yig'iladigan bo'limlar to'plami — bir vaqtning o'zida faqat bittasi (yoki bir nechtasi) ochiq bo'lishi mumkin.

Ha. Barcha komponentlar WAI-ARIA yo'riqnomalariga rioya qiladi. Klaviatura navigatsiyasi, fokusni boshqarish va ekran o'qiyishchilariga qo'llab-quvvatlash ichida o'rnatilgan.

Ha. Har bir komponent CSS custom properties yordamida yorug' va qorong'u mavzularni qo'llab-quvvatlaydi. Ildiz elementingizda .dark klassini almashtiring.

Albatta. Barcha komponentlar CSS o'zgaruvchilari orqali dizayn tokenlaridan foydalanadi. Brendingizga mos ravishda --primary, --border, --radius va boshqalarni qayta aniqlang.

<script setup lang="ts">
import { ref } from 'vue'
import { VxAccordion, VxAccordionItem } from 'veloxui'

const value = ref('item-1')
</script>

<template>
  <VxAccordion v-model="value" type="single">
    <VxAccordionItem value="item-1">
      <template #trigger>Is VeloxUI accessible?</template>
      Yes. All components follow WAI-ARIA guidelines.
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Does it support dark mode?</template>
      Yes. Every component supports light and dark themes.
    </VxAccordionItem>
    <VxAccordionItem value="item-3">
      <template #trigger>Can I customize the styling?</template>
      Absolutely. Override CSS variables to match your brand.
    </VxAccordionItem>
  </VxAccordion>
</template>

Multiple

Bir vaqtning o'zida bir nechta bo'limni ochish uchun type="multiple" ni o'rnating. Model qiymati string[] bo'ladi.

VeloxUI ni npm install veloxui bilan o'rnating, so'ngra pluginni yoki alohida komponentlarni import qiling. To'liq TypeScript qo'llab-quvvatlash darhol mavjud.

VeloxUI 30 dan ortiq komponent bilan keladi: Button, Input, Select, Transfer, Calendar, Accordion, Card, Avatar, Badge, Checkbox, Upload, Switch, Rating, Slider va boshqalar.

:root dagi CSS o'zgaruvchilarini qayta aniqlash orqali mavzuingizni sozlang. Barcha ranglar, border radius, soyalar va oraliqlar token asosida bo'lgani uchun o'zgarishlar hamma joyda tarqaladi.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>(['item-1'])
</script>

<template>
  <VxAccordion v-model="value" type="multiple">
    <VxAccordionItem value="item-1">
      <template #trigger>Getting Started</template>
      Install VeloxUI with npm install veloxui...
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Component Library</template>
      VeloxUI ships with 30+ components...
    </VxAccordionItem>
    <VxAccordionItem value="item-3">
      <template #trigger>Theming</template>
      Customize your theme by overriding CSS variables...
    </VxAccordionItem>
  </VxAccordion>
</template>

Non-collapsible

Oxirgi ochiq elementning yopilishini oldini olish uchun :collapsible="false" ni o'rnating — bir bo'lim doim kengaytirilgan bo'ladi.

Hisob sozlamalari, email afzalliklari va profil ma'lumotlaringizni boshqaring.

Parolingizni yangilang, ikki bosqichli autentifikatsiyani yoqing va kirish tarixini ko'rib chiqing.

Qaysi email va push bildirishnomalarni olmoqchi bo'lganingizni tanlang.

<script setup lang="ts">
import { VxAccordion, VxAccordionItem } from 'veloxui'
</script>

<template>
  <VxAccordion model-value="item-1" :collapsible="false">
    <VxAccordionItem value="item-1">
      <template #trigger>Account</template>
      Manage your account settings...
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Security</template>
      Update your password...
    </VxAccordionItem>
  </VxAccordion>
</template>

Disabled Item

Alohida elementlar o'chirib qo'yilishi mumkin, boshqalari interaktiv bo'lib qoladi.

Asosiy funksiyalar bilan boshlang. 1 ta loyiha, 100MB saqlash joyi va jamoa yordamini o'z ichiga oladi.

Katta jamoalar uchun maxsus narxlash. Tafsilotlar uchun savdo bo'limi bilan bog'laning.

Cheksiz loyihalar, 50GB saqlash joyi, ustuvor yordam va ilg'or analitika. Oyiga $19.

<template>
  <VxAccordion type="single">
    <VxAccordionItem value="free">
      <template #trigger>Free Plan</template>
      Basic features included.
    </VxAccordionItem>
    <VxAccordionItem value="enterprise" disabled>
      <template #trigger>Enterprise (Coming Soon)</template>
      Contact sales for details.
    </VxAccordionItem>
    <VxAccordionItem value="pro">
      <template #trigger>Pro Plan</template>
      Unlimited projects, $19/month.
    </VxAccordionItem>
  </VxAccordion>
</template>

With Card

Chiroyli FAQ bo'limi uchun accordion ni karta ichiga joylashtiring.

Ko'p beriladigan savollar

VeloxUI haqida bilishingiz kerak bo'lgan hamma narsa.

---

Vue 3 loyihangizda npm install veloxui ni ishga tushiring. So'ngra pluginni import qiling yoki alohida komponentlarni import qilish uchun tree-shaking dan foydalaning.

Ha. VeloxUI Nuxt 3 bilan mos keladi. Pluginni Nuxt plugin faylingizga import qiling va ishlatishga tayyor.

Yo'q. VeloxUI ham TypeScript, ham oddiy JavaScript bilan ishlaydi. Biroq, TypeScript bilan siz to'liq type inference va autocompletion ni olasiz.

Ha. VeloxUI scoped CSS va dizayn tokenlaridan foydalanadi, shuning uchun u Tailwind bilan nizosiz birga mavjud bo'ladi. Siz komponent stillarini Tailwind klasslari bilan ham qayta aniqlashingiz mumkin.

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription, VxCardDivider,
  VxAccordion, VxAccordionItem
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Frequently Asked Questions</VxCardTitle>
      <VxCardDescription>Everything you need to know about VeloxUI.</VxCardDescription>
    </VxCardHeader>
    <VxCardDivider />
    <VxAccordion type="single" model-value="faq-1" style="border: none; border-radius: 0;">
      <VxAccordionItem value="faq-1">
        <template #trigger>How do I install VeloxUI?</template>
        Run npm install veloxui in your Vue 3 project.
      </VxAccordionItem>
      <VxAccordionItem value="faq-2">
        <template #trigger>Does it work with Nuxt?</template>
        Yes. VeloxUI is compatible with Nuxt 3.
      </VxAccordionItem>
    </VxAccordion>
  </VxCard>
</template>

Rich Content

Accordion elementlari har qanday kontentni o'z ichiga olishi mumkin — formalar, ro'yxatlar, rasmlar yoki boshqa komponentlar.

1 ta loyiha

100MB saqlash joyi

Jamoa yordami

Cheksiz loyihalar

50GB saqlash joyi

Ustuvor yordam

Ilg'or analitika

<script setup lang="ts">
import { ref } from 'vue'
import { VxAccordion, VxAccordionItem, VxAvatar } from 'veloxui'

const plan = ref('plan-1')
</script>

<template>
  <VxAccordion v-model="plan" type="single">
    <VxAccordionItem value="plan-1">
      <template #trigger>
        <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
          <VxAvatar name="Free" size="sm" bg-color="#22c55e" />
          <div>
            <div style="font-weight: 600;">Free</div>
            <div style="font-size: 12px;">For personal projects</div>
          </div>
          <span style="margin-left: auto; font-weight: 700;">$0</span>
        </div>
      </template>
      <!-- feature list -->
    </VxAccordionItem>
  </VxAccordion>
</template>

Accordion Props

Prop	Type	Default	Description
modelValue	string | string[]	—	Faol element(lar) (v-model)
type	'single' | 'multiple'	'single'	Bitta yoki bir nechta element ochiq
collapsible	boolean	true	Oxirgi elementni yopishga ruxsat berish (single rejimi)
disabled	boolean	false	Barcha elementlarni o'chirib qo'yish

AccordionItem Props

Prop	Type	Default	Description
value	string	(required)	Noyob identifikator
disabled	boolean	false	Ushbu elementni o'chirib qo'yish

Events

Event	Type	Description
update:modelValue	(string | string[])	Faol element(lar) o'zgardi

Slots

Component	Slot	Description
VxAccordionItem	trigger	Trigger yorlig'i (matn yoki boy kontent bo'lishi mumkin)
VxAccordionItem	default	Kengaytirilgan tana kontenti