Separator

AkarGitHub
Separates content horizontally or vertically.

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
as'div'any

The element or component this component should render as.

orientation'horizontal'"horizontal" | "vertical"

The orientation of the separator.

labelstring

Display a label in the middle.

iconstring | object

Display an icon in the middle.

avatarPAvatarProps

Display an avatar in the middle.

color'neutral'"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error"
size'xs'"xs" | "sm" | "md" | "lg" | "xl"
type'solid'"solid" | "dashed" | "dotted"
decorativeboolean

Whether or not the component is purely decorative.
When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.

pohon{ root?: ClassValue; border?: ClassValue; container?: ClassValue; icon?: ClassValue; avatar?: ClassValue; avatarSize?: ClassValue; label?: ClassValue; }

Slots

Slot Type
default{ pohon: object; }

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

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.

app.config.ts
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'
      }
    }
  }
};
vite.config.ts
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.

Changelog

No recent changes

Progress

An indicator showing the progress of a task.

Skeleton

A placeholder to show while content is loading.