🌐 Nodejs.cn

切换

PreviousNext

可以打开或关闭的双状态按钮。

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

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

安装

🌐 Installation

pnpm dlx shadcn-vue@latest add toggle

用法

🌐 Usage

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

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

示例

🌐 Examples

默认

🌐 Default

<script setup lang="ts">
import { Bold } from 'lucide-vue-next'
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-next'

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

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

带有文本

🌐 With Text

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

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

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

小

🌐 Small

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

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

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

大

🌐 Large

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

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

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

已禁用

🌐 Disabled

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

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