介绍
本文档描述了 ShadcnSlider 组件的特性和使用方法。
用法
查看代码
vue
<template>
<ShadcnSlider v-model="value" :dark="darkMode" />
</template>最小值 (min)
查看代码
vue
<template>
<ShadcnSlider v-model="value" :min="0" :dark="darkMode" />
</template>最大值 (max)
查看代码
vue
<template>
<ShadcnSlider v-model="value" :max="10" :dark="darkMode" />
</template>间隔 (step)
查看代码
vue
<template>
<ShadcnSlider v-model="value" :step="10" :dark="darkMode" />
</template>显示提示 (show-tip)
查看代码
vue
<template>
<ShadcnSlider v-model="value" showTip :dark="darkMode" />
<ShadcnSlider v-model="value" :showTip="false" :dark="darkMode" />
</template>显示间隔 (show-step)
查看代码
vue
<template>
<ShadcnSlider v-model="value" showStep :dark="darkMode" />
<ShadcnSlider v-model="value" :showStep="false" :dark="darkMode" />
</template>禁用 (disabled)
查看代码
vue
<template>
<ShadcnSlider v-model="value" disabled :dark="darkMode" />
<ShadcnSlider v-model="value" :disabled="false" :dark="darkMode" />
</template>类型 (type)
查看代码
vue
<template>
<ShadcnSlider v-model="value" type="primary" :dark="darkMode" />
<ShadcnSlider v-model="value" type="warning" :dark="darkMode" />
<ShadcnSlider v-model="value" type="success" :dark="darkMode" />
<ShadcnSlider v-model="value" type="error" :dark="darkMode" />
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-indigo-900 to-purple-900' : 'bg-gradient-to-r from-indigo-400 to-purple-400']">
<div class="space-y-6">
<ShadcnSlider v-model="glassValue1" glass :dark="darkMode"/>
<ShadcnSlider v-model="glassValue2" glass :dark="darkMode" show-tip/>
<ShadcnSlider v-model="glassValue3" glass :dark="darkMode" show-step :step="10"/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const glassValue1 = ref(50)
const glassValue2 = ref(75)
const glassValue3 = ref(30)
</script>