9.7k
新建

切换 (Toggle)

上一页下一页

一种可以处于“开启”或“关闭”两种状态的按钮。

文档 API 参考 
<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>

安装

pnpm dlx shadcn-vue@latest add toggle

使用方法

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

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

示例

默认

<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>

大纲

<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>

带文字

<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>

小

<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>

大

<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>

禁用

<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 (提示)Toggle Group (切换组)