Separator
Separa el contenido horizontal o verticalmente.
xph0000xUso
Utilice el componente Separador para separar el contenido.
<template>
<USeparator />
</template>Orientación
Utilice el prop orientation para cambiar la orientación del Separator. Defaults a horizontal.
<template>
<USeparator orientation="vertical" class="h-48" />
</template>Label
Utilice el accesorio label para mostrar una etiqueta en el centro del separador.
Hello World
<template>
<USeparator label="Hello World" />
</template>Ubicación: badge{label="4.8+" class="align-text-top"}
Utilice la prop position para cambiar la posición del contenido del Separator. Defaults a center.
Hello World
<template>
<USeparator position="start" label="Hello World" />
</template>Icono
Utilice el accesorio icon para mostrar un icono en el centro del separador.
<template>
<USeparator icon="i-simple-icons-nuxtdotjs" />
</template>Avatar
Utilice el soporte avatar para mostrar un avatar en el centro del Separador.
<template>
<USeparator
:avatar="{
src: 'https://github.com/nuxt.png',
loading: 'lazy'
}"
/>
</template>Color (Edición española)
Utilice el prop color para cambiar el color del Separator. Defaults a neutral.
<template>
<USeparator color="primary" type="solid" />
</template>Tipo
Utilice el prop type para cambiar el tipo de Separator. Defaults a solid.
<template>
<USeparator type="dashed" />
</template>Tamaño
Utilice el prop size para cambiar el tamaño del Separator. Prevalus a xs.
<template>
<USeparator size="lg" />
</template>API (Edición española)
Accesorios
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
label | stringDisplay a label on the separator. | |
icon | anyDisplay an icon on the separator. | |
avatar | AvatarPropsDisplay an avatar on the separator. | |
color | 'neutral' | "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" |
size | 'xs' | "xs" | "sm" | "md" | "lg" | "xl" |
type | 'solid' | "solid" | "dashed" | "dotted" |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the separator. |
position | 'center' | "center" | "start" | "end"The position of the content. |
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 (en inglés)
| Slot | Type |
|---|---|
default | { ui: object; } |
Temas
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: 'whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: ''
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
position: {
start: '',
center: '',
end: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
position: 'start',
class: {
container: 'me-3'
}
},
{
orientation: 'horizontal',
position: 'center',
class: {
container: 'mx-3'
}
},
{
orientation: 'horizontal',
position: 'end',
class: {
container: 'ms-3'
}
},
{
orientation: 'vertical',
position: 'start',
class: {
container: 'mb-2'
}
},
{
orientation: 'vertical',
position: 'center',
class: {
container: 'my-2'
}
},
{
orientation: 'vertical',
position: 'end',
class: {
container: 'mt-2'
}
},
{
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: 'whitespace-nowrap'
},
vertical: {
root: 'h-full flex-col',
border: 'h-full',
container: ''
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
position: {
start: '',
center: '',
end: ''
},
type: {
solid: {
border: 'border-solid'
},
dashed: {
border: 'border-dashed'
},
dotted: {
border: 'border-dotted'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
position: 'start',
class: {
container: 'me-3'
}
},
{
orientation: 'horizontal',
position: 'center',
class: {
container: 'mx-3'
}
},
{
orientation: 'horizontal',
position: 'end',
class: {
container: 'ms-3'
}
},
{
orientation: 'vertical',
position: 'start',
class: {
container: 'mb-2'
}
},
{
orientation: 'vertical',
position: 'center',
class: {
container: 'my-2'
}
},
{
orientation: 'vertical',
position: 'end',
class: {
container: 'mt-2'
}
},
{
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 (Edición española)
No recent changes