介绍
本文档主要用于描述 ShadcnToggle 组件的一些特性和用法。
用法
查看代码
vue
<template>
<p>Default Value: {{ defaultValue }}</p>
<ShadcnToggle v-model="defaultValue" value="B">B</ShadcnToggle>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(null)
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnToggle value="B">B</ShadcnToggle>
<ShadcnToggle disabled value="D">D</ShadcnToggle>
</template>尺寸 (size)
查看代码
vue
<template>
<ShadcnSpace>
<ShadcnToggle v-model="defaultValue" size="small" value="S">S</ShadcnToggle>
<ShadcnToggle v-model="defaultValue" size="default" value="D">D</ShadcnToggle>
<ShadcnToggle v-model="defaultValue" size="large" value="L">L</ShadcnToggle>
</ShadcnSpace>
</template>组 (group)
查看代码
vue
<template>
<div class="space-y-2">
<p>Default Value: {{ selected }}</p>
<ShadcnToggleGroup v-model="defaultValue" size="small">
<ShadcnToggle value="1">O1</ShadcnToggle>
<ShadcnToggle value="2">O2</ShadcnToggle>
</ShadcnToggleGroup>
<ShadcnToggleGroup v-model="defaultValue" size="default">
<ShadcnToggle value="1">O1</ShadcnToggle>
<ShadcnToggle value="2">O2</ShadcnToggle>
</ShadcnToggleGroup>
<ShadcnToggleGroup v-model="defaultValue" size="large">
<ShadcnToggle value="1">O1</ShadcnToggle>
<ShadcnToggle value="2">O2</ShadcnToggle>
</ShadcnToggleGroup>
</div>
</template>多选 (multiple)
查看代码
vue
<template>
<p>Default Value: {{ defaultValue }}</p>
<ShadcnToggleGroup v-model="defaultValue" multiple>
<ShadcnToggle value="1">O1</ShadcnToggle>
<ShadcnToggle value="2">O2</ShadcnToggle>
<ShadcnToggle value="3">O3</ShadcnToggle>
<ShadcnToggle value="4">O4</ShadcnToggle>
</ShadcnToggleGroup>
</template>自定义图片 (image)
查看代码
vue
<template>
<ShadcnToggleGroup v-model="defaultValue" multiple>
<ShadcnToggle class="w-20 h-20 px-1 py-1" value="1">
<img src="https://www.vectorlogo.zone/logos/java/java-icon.svg">
</ShadcnToggle>
<ShadcnToggle class="w-20 h-20 px-1 py-1" value="2">
<img src="https://www.vectorlogo.zone/logos/python/python-icon.svg">
</ShadcnToggle>
</ShadcnToggleGroup>
</template>