Usage
Use the Separator component as-is to separate content.
<template>
<PSeparator />
</template>
Orientation
Use the orientation prop to change the orientation of the Separator. Defaults to horizontal.
<template>
<PSeparator orientation="vertical" class="akar:h-48" />
</template>
Label
Use the label prop to display a label in the middle of the Separator.
<template>
<PSeparator label="Hello World" />
</template>
Icon
Use the icon prop to display an icon in the middle of the Separator.
<template>
<PSeparator icon="i-simple-icons:nuxtdotjs" />
</template>
Avatar
Use the avatar prop to display an avatar in the middle of the Separator.
<template>
<PSeparator
:avatar="{
src: 'https://github.com/nuxt.png'
}"
/>
</template>
Color
Use the color prop to change the color of the Separator. Defaults to neutral.
<template>
<PSeparator color="primary" type="solid" />
</template>
Type
Use the type prop to change the type of the Separator. Defaults to solid.
<template>
<PSeparator type="dashed" />
</template>
Size
Use the size prop to change the size of the Separator. Defaults to xs.
<template>
<PSeparator size="lg" />
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
Below is the theme configuration skeleton for the PSeparator. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
separator: {
slots: {
root: '',
border: '',
container: '',
icon: '',
avatar: '',
avatarSize: '',
label: ''
},
variants: {
color: {
primary: {
border: ''
},
secondary: {
border: ''
},
success: {
border: ''
},
info: {
border: ''
},
warning: {
border: ''
},
error: {
border: ''
},
neutral: {
border: ''
}
},
orientation: {
horizontal: {
root: '',
border: '',
container: ''
},
vertical: {
root: '',
border: '',
container: ''
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: ''
},
dashed: {
border: ''
},
dotted: {
border: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
separator: {
slots: {
root: '',
border: '',
container: '',
icon: '',
avatar: '',
avatarSize: '',
label: ''
},
variants: {
color: {
primary: {
border: ''
},
secondary: {
border: ''
},
success: {
border: ''
},
info: {
border: ''
},
warning: {
border: ''
},
error: {
border: ''
},
neutral: {
border: ''
}
},
orientation: {
horizontal: {
root: '',
border: '',
container: ''
},
vertical: {
root: '',
border: '',
container: ''
}
},
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
border: ''
},
dashed: {
border: ''
},
dotted: {
border: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'neutral',
size: 'xs',
type: 'solid'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.