用法
直接使用 Separator 组件来分隔内容。
<template>
<USeparator />
</template>
方向
使用 orientation 属性来改变 Separator 的方向。默认为 horizontal。
<template>
<USeparator orientation="vertical" class="h-48" />
</template>
标签
使用 label 属性在 Separator 中间显示一个标签。
<template>
<USeparator label="Hello World" />
</template>
Icon
使用 icon 属性在 Separator 中间显示一个图标。
<template>
<USeparator icon="i-simple-icons-nuxtdotjs" />
</template>
Avatar
使用 avatar 属性在 Separator 中间显示一个头像。
<template>
<USeparator
:avatar="{
src: 'https://github.com/nuxt.png'
}"
/>
</template>
颜色
使用 color 属性来改变 Separator 的颜色。默认为 neutral。
<template>
<USeparator color="primary" type="solid" />
</template>
类型
使用 type 属性来改变 Separator 的类型。默认为 solid。
<template>
<USeparator type="dashed" />
</template>
尺寸
使用 size 属性来改变 Separator 的尺寸。默认为 xs。
<template>
<USeparator size="lg" />
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染成的元素或组件。 |
label |
在中间显示一个标签。 | |
icon |
在中间显示一个图标。 | |
avatar |
在中间显示一个头像。
| |
color |
|
|
size |
|
|
type |
|
|
orientation |
|
分隔符的方向。 |
decorative |
组件是否纯粹是装饰性的。 | |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
separator: {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-default flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm'
},
variants: {
color: {
primary: {
border: 'border-primary'
},
secondary: {
border: 'border-secondary'
},
success: {
border: 'border-success'
},
info: {
border: 'border-info'
},
warning: {
border: 'border-warning'
},
error: {
border: 'border-error'
},
neutral: {
border: 'border-default'
}
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2'
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
border: 'border-t'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
border: 'border-t-[2px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
border: 'border-t-[3px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
border: 'border-t-[4px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
border: 'border-t-[5px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
border: 'border-s'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
border: 'border-s-[2px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
border: 'border-s-[3px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
border: 'border-s-[4px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
border: 'border-s-[5px]'
}
}
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
separator: {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-default flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm'
},
variants: {
color: {
primary: {
border: 'border-primary'
},
secondary: {
border: 'border-secondary'
},
success: {
border: 'border-success'
},
info: {
border: 'border-info'
},
warning: {
border: 'border-warning'
},
error: {
border: 'border-error'
},
neutral: {
border: 'border-default'
}
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2'
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
border: 'border-t'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
border: 'border-t-[2px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
border: 'border-t-[3px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
border: 'border-t-[4px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
border: 'border-t-[5px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
border: 'border-s'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
border: 'border-s-[2px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
border: 'border-s-[3px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
border: 'border-s-[4px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
border: 'border-s-[5px]'
}
}
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
separator: {
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-default flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
label: 'text-sm'
},
variants: {
color: {
primary: {
border: 'border-primary'
},
secondary: {
border: 'border-secondary'
},
success: {
border: 'border-success'
},
info: {
border: 'border-info'
},
warning: {
border: 'border-warning'
},
error: {
border: 'border-error'
},
neutral: {
border: 'border-default'
}
},
orientation: {
horizontal: {
root: 'w-full flex-row',
border: 'w-full',
container: 'mx-3 whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: 'my-2'
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
border: 'border-t'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
border: 'border-t-[2px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
border: 'border-t-[3px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
border: 'border-t-[4px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
border: 'border-t-[5px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
border: 'border-s'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
border: 'border-s-[2px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
border: 'border-s-[3px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
border: 'border-s-[4px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
border: 'border-s-[5px]'
}
}
],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
})
]
})