Karkas · molecule
Akkordeon
Yiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi. Strelka (chevron) yopiqda −90°, oçiqda 0°. Kengaytma: data-variant=bordered|separated|fluş, data-chevron=start, .fx-accordion__icon/.fx-accordion__meta, içma-iç, data-focus=inset, bosmada hammasi oçiq.
Obuna tugasa nima böladi?
Neçta qurilmada işlaydi?
Tölov
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | borderedseparatedflush | — |
data-chevron | start | — |
data-focus | inset | — |
Anatomiya
- root
.fx-accordionşart - item
.fx-accordion__itemşart - summary
.fx-accordion__summaryşart - body
.fx-accordion__bodyixtiyoriy - icon
.fx-accordion__iconixtiyoriy - meta
.fx-accordion__metaixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Oçadi / yopadi |
Native details/summary — klaviatura va ekran öquvçi brauzerda.
Naqş: WAI-ARIA APG accordion · rol group
Kod
AI uçun: qaçon işlatiladi
- FAQ, sozlamalar guruhlari, qöşimça tafsilot.
- Bir xil darajadagi körinişlar →
tabs - Asosiy mazmunni akkordeonga yaşirmang — faqat qöşimça (FAQ, tafsilot).
npx foxui add accordion
<div class="fx-accordion">
<details class="fx-accordion__item" name="faq" open>
<summary class="fx-accordion__summary">Obuna tugasa nima böladi?</summary>
<div class="fx-accordion__body">Yuklab olingan versiyalar sizda abadiy qoladi; yangilaniş va MCP töxtaydi.</div>
</details>
<details class="fx-accordion__item" name="faq">
<summary class="fx-accordion__summary">Neçta qurilmada işlaydi?</summary>
<div class="fx-accordion__body">Bitta litsenziya — bitta odam, 3 ta qurilma.</div>
</details>
</div>
<div class="fx-accordion" data-variant="separated"><details class="fx-accordion__item" name="b2"><summary class="fx-accordion__summary">Tölov<span class="fx-accordion__meta">3 ta</span></summary><div class="fx-accordion__body">Tafsilot.</div></details></div>Tokenlar: --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-motion-base --fx-motion-fast --fx-radius-badge --fx-radius-surface --fx-size-icon-md --fx-size-icon-sm --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary