介绍
本文档主要用于描述 ShadcnTag 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Text"/>
<ShadcnTag>Slot</ShadcnTag>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>类型 (type)
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Text"/>
<ShadcnTag text="Text" type="primary"/>
<ShadcnTag text="Text" type="success"/>
<ShadcnTag text="Text" type="warning"/>
<ShadcnTag text="Text" type="error"/>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>边框 (border)
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Text" border/>
<ShadcnTag text="Text" type="primary" border/>
<ShadcnTag text="Text" type="success" border/>
<ShadcnTag text="Text" type="warning" border/>
<ShadcnTag text="Text" type="error" border/>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Default Tag" size="default"/>
<ShadcnTag text="Medium Tag" size="medium"/>
<ShadcnTag text="Large Tag Width" size="large"/>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>可关闭 (closeable)
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Default Tag" size="default" closable @on-close="console.log('on-close')"/>
<ShadcnTag text="Medium Tag" size="medium" closable/>
<ShadcnTag text="Large Tag Width" size="large" closable/>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>颜色 (color)
查看代码
vue
<template>
<ShadcnSpace wrap>
<ShadcnTag text="Default Tag" border color="#D35DD4"/>
<ShadcnTag text="Medium Tag" border color="#39604B"/>
<ShadcnTag text="Large Tag Width" border color="#301A65"/>
</ShadcnSpace>
</template>
<script setup lang="ts">
</script>