@peduarte starred 3 repositories

reka-ui

Installation

pnpm dlx kliping@latest add collapsible

Usage

<script setup lang="ts">
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
</script>

<template>
  <Collapsible>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      Yes. Free to use for personal and commercial projects. No attribution
      required.
    </CollapsibleContent>
  </Collapsible>
</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	reka-ui@^2.10.3
Files	components/ui/collapsible/collapsible.vue components/ui/collapsible/collapsible-content.vue components/ui/collapsible/collapsible-trigger.vue components/ui/collapsible/index.ts

Anatomy

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

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

API Reference

Collapsible

Prop	Type	Default	Description
defaultOpen?	boolean	—	The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
open?	boolean	—	The controlled open state of the collapsible. Can be binded with v-model.
disabled?	boolean	—	When true, prevents the user from interacting with the collapsible.
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.

Event	Payload	Description
@update:open	[value: boolean]	Emitted when the open state changes.

Slot	Props
#default	{ open: boolean; }

Data attribute	Value
[data-slot]	"collapsible"

CollapsibleContent

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]	"collapsible-content"

CollapsibleTrigger

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	—

Data attribute	Value
[data-slot]	"collapsible-trigger"

Keyboard Interactions

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

Key	Description
Space	Opens/closes the collapsible
Enter	Opens/closes the collapsible

Credits

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