Toggle

Nút bấm hai trạng thái có thể bật hoặc tắt.

Cài đặt

npm

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

pnpm

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

yarn

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

bun

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

Sử dụng

Vue

<script setup lang="ts">
import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle>Toggle</Toggle>
</template>

React

import { Toggle } from "@/components/ui/toggle"

export default function App() {
  return <Toggle>Toggle</Toggle>
}

Angular

import { Component } from '@angular/core';
import { ToggleComponent } from '@/components/ui/toggle';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToggleComponent],
  template: `<ui-toggle>Toggle</ui-toggle>`
})
export class AppComponent {}

API Reference

Props

Prop	Type	Default	Mô tả	Frameworks
pressed	boolean	-	Trạng thái pressed (controlled)	All
defaultPressed	boolean	false	Trạng thái pressed ban đầu (uncontrolled)	All
onPressedChange	(pressed: boolean) => void	-	Gọi khi trạng thái pressed thay đổi	All
disabled	boolean	false	Vô hiệu hóa toggle	All
variant	'default' | 'outline'	'default'	Biến thể kiểu hiển thị	All
size	'default' | 'sm' | 'lg'	'default'	Biến thể kích thước	All
asChild	boolean	false	Render như phần tử con	React, Vue, Angular
className	string	''	CSS class bổ sung	All

Ví dụ

Mặc định

Vue

<Toggle>Toggle</Toggle>

React

<Toggle>Toggle</Toggle>

Angular

<ui-toggle>Toggle</ui-toggle>

Outline

Vue

<Toggle variant="outline">Toggle</Toggle>

React

<Toggle variant="outline">Toggle</Toggle>

Angular

<ui-toggle variant="outline">Toggle</ui-toggle>

Với text

Vue

<script setup lang="ts">
import { Italic } from 'lucide-vue-next'
import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle aria-label="Toggle italic">
    <Italic class="mr-2 h-4 w-4" />
    Italic
  </Toggle>
</template>

React

import { Italic } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"

export default function App() {
  return (
    <Toggle aria-label="Toggle italic">
      <Italic className="mr-2 h-4 w-4" />
      Italic
    </Toggle>
  )
}

Angular

<ui-toggle aria-label="Toggle italic">
  <i class="icon-italic mr-2"></i>
  Italic
</ui-toggle>

Kích thước

Vue

<div class="flex gap-2">
  <Toggle size="sm">Small</Toggle>
  <Toggle size="default">Default</Toggle>
  <Toggle size="lg">Large</Toggle>
</div>

React

<div className="flex gap-2">
  <Toggle size="sm">Small</Toggle>
  <Toggle size="default">Default</Toggle>
  <Toggle size="lg">Large</Toggle>
</div>

Angular

<div class="flex gap-2">
  <ui-toggle size="sm">Small</ui-toggle>
  <ui-toggle size="default">Default</ui-toggle>
  <ui-toggle size="lg">Large</ui-toggle>
</div>

Vô hiệu hóa

Vue

<Toggle disabled>Disabled</Toggle>

React

<Toggle disabled>Disabled</Toggle>

Angular

<ui-toggle [disabled]="true">Disabled</ui-toggle>

Tương tác bàn phím

Phím	Mô tả
Space	Bật/tắt trạng thái
Enter	Bật/tắt trạng thái

Khả năng tiếp cận

Tuân thủ WAI-ARIA Toggle Button Pattern.

• Sử dụng thuộc tính aria-pressed để chỉ ra trạng thái toggle
• Hỗ trợ điều hướng bằng bàn phím
• Có thể focus được

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)