Toggle

Tombol dua keadaan yang bisa dinyalakan atau dimatikan.

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

<template>
  <Toggle aria-label="Toggle bold">
    <Bold class="h-4 w-4" />
  </Toggle>
</template>

Instalasi

CLI

npx shadcn-vue@latest add toggle

Manual

Pasang dependensi berikut:

npm install reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

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

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

Contoh

Bawaan

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

<template>
  <Toggle aria-label="Toggle bold">
    <Bold class="h-4 w-4" />
  </Toggle>
</template>

Outline

<script setup lang="ts">
import { Bold } from '@lucide/vue'

import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle variant="outline" aria-label="Toggle bold">
    <Bold />
  </Toggle>
</template>

Dengan Teks

<script setup lang="ts">
import { Italic } from '@lucide/vue'

import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle aria-label="Toggle italic">
    <Italic />
    Italic
  </Toggle>
</template>

Kecil

<script setup lang="ts">
import { Italic } from '@lucide/vue'

import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle size="sm" aria-label="Toggle italic">
    <Italic />
  </Toggle>
</template>

Besar

<script setup lang="ts">
import { Italic } from '@lucide/vue'

import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle size="lg" aria-label="Toggle italic">
    <Italic />
  </Toggle>
</template>

Nonaktif

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

<template>
  <Toggle aria-label="Toggle underline" disabled>
    <Underline class="h-4 w-4" />
  </Toggle>
</template>