Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

Installation

pnpm dlx kliping@latest add accordion

Usage

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
</script>

<template>
  <Accordion type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/accordion/accordion.vue components/ui/accordion/accordion-content.vue components/ui/accordion/accordion-item.vue components/ui/accordion/accordion-trigger.vue components/ui/accordion/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

API Reference

Accordion

Prop	Type	Default	Description
collapsible?	boolean	—	When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.
disabled?	boolean	—	When true, prevents the user from interacting with the accordion and all its items
dir?	Direction	—	The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.
orientation?	DataOrientation	—	The orientation of the accordion.
unmountOnHide?	boolean	—	When true, the element will be unmounted on closed state.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
type?	SingleOrMultipleType	—	Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from modelValue and defaultValue.
modelValue?	string | string[]	—	The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with v-model
defaultValue?	string | string[]	—	The default active value of the item(s). Use when you do not need to control the state of the item(s).

Event	Payload	Description
@update:modelValue	[value: string | string[] | undefined]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: AcceptableValue | AcceptableValue[] | undefined; }

Data attribute	Value
[data-slot]	"accordion"

AccordionContent

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"accordion-content"

AccordionItem

Prop	Type	Default	Description
disabled?	boolean	—	Whether or not an accordion item is disabled from user interaction. When true, prevents the user from interacting with the item.
value	string	—	A string value for the accordion item. All items within an accordion should use a unique value.
unmountOnHide?	boolean	—	When true, the element will be unmounted on closed state.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	{ open: boolean; }

Data attribute	Value
[data-slot]	"accordion-item"

AccordionTrigger

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—
#icon	—

Data attribute	Value
[data-slot]	"accordion-trigger"
[data-state]	set at runtime

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Accordion yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space	When focus is on an AccordionTrigger of a collapsed section, expands the section.
Enter	When focus is on an AccordionTrigger of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
ArrowDown	Moves focus to the next AccordionTrigger when orientation is vertical.
ArrowUp	Moves focus to the previous AccordionTrigger when orientation is vertical.
ArrowRight	Moves focus to the next AccordionTrigger when orientation is horizontal.
ArrowLeft	Moves focus to the previous AccordionTrigger when orientation is horizontal.
Home	When focus is on an AccordionTrigger, moves focus to the start AccordionTrigger.
End	When focus is on an AccordionTrigger, moves focus to the last AccordionTrigger.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --muted-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.