Collapsible

Một component tương tác mở rộng/thu gọn một panel.

@peduarte starred 3 repositories

Toggle

@radix-ui/primitives

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add collapsible

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add collapsible

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add collapsible

bun

bunx @galaxy-stack/nebula-cli@latest add collapsible

Sử dụng

Vue

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

const isOpen = ref(false)
</script>

<template>
  <Collapsible v-model:open="isOpen">
    <CollapsibleTrigger>Tôi có thể sử dụng trong dự án của mình không?</CollapsibleTrigger>
    <CollapsibleContent>
      Có. Miễn phí sử dụng cho các dự án cá nhân và thương mại.
    </CollapsibleContent>
  </Collapsible>
</template>

React

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui'

export default function CollapsibleDemo() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Tôi có thể sử dụng trong dự án của mình không?</CollapsibleTrigger>
      <CollapsibleContent>
        Có. Miễn phí sử dụng cho các dự án cá nhân và thương mại.
      </CollapsibleContent>
    </Collapsible>
  )
}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)