Uso
Use o componente Separator como está para separar conteúdo.
<template>
<NSeparator />
</template>
Orientação
Use a prop orientation para alterar a orientação do Separator. O padrão é horizontal.
<template>
<NSeparator orientation="vertical" class="h-48" />
</template>
Label
Use a prop label para exibir um rótulo no meio do Separator.
Hello World
<template>
<NSeparator label="Hello World" />
</template>
Posição 4.8+
Use a prop position para alterar a posição do conteúdo do Separator. O padrão é center.
Hello World
<template>
<NSeparator position="start" label="Hello World" />
</template>
Ícone
Use a prop icon para exibir um ícone no meio do Separator.
<template>
<NSeparator icon="i-simple-icons-nuxtdotjs" />
</template>
Avatar
Use a prop avatar para exibir um avatar no meio do Separator.
<template>
<NSeparator
:avatar="{
src: 'https://github.com/nuxt.png',
loading: 'lazy'
}"
/>
</template>
Cor
Use a prop color para alterar a cor do Separator. O padrão é neutral.
<template>
<NSeparator color="primary" type="solid" />
</template>
Tipo
Use a prop type para alterar o tipo do Separator. O padrão é solid.
<template>
<NSeparator type="dashed" />
</template>
Tamanho
Use a prop size para alterar o tamanho do Separator. O padrão é xs.
<template>
<NSeparator size="lg" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
label | stringDisplay a label in the middle. | |
icon | anyDisplay an icon in the middle. | |
avatar | AvatarPropsDisplay an avatar in the middle. | |
color | 'neutral' | "error" | "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" |
size | 'xs' | "xs" | "sm" | "md" | "lg" | "xl" |
type | 'solid' | "solid" | "dashed" | "dotted" |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the separator. |
decorative | boolean Whether or not the component is purely decorative. | |
ui | { root?: SlotClass; border?: SlotClass; container?: SlotClass; icon?: SlotClass; avatar?: SlotClass; avatarSize?: SlotClass; label?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | { ui: object; } |
Tema
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'
},
accent: {
border: 'border-accent'
},
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 '@nitro/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'
},
accent: {
border: 'border-accent'
},
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'
}
}
}
})
]
})
Changelog
No recent changes