Divider

Divider is a thin line that separates content areas.

Basic Usage

Basic horizontal divider.

Above content

---

Below content

<template>
  <p>Above content</p>
  <u-divider></u-divider>
  <p>Below content</p>
</template>

Color

Customize divider color.

---

<template>
  <u-divider color="#ff5252"></u-divider>
</template>

Vertical Divider

Use vertical divider to separate inline elements.

Left

---

Right

<template>
  <div style="display: flex; align-items: center; gap: 16px;">
    <span>Left</span>
    <u-divider vertical></u-divider>
    <span>Right</span>
  </div>
</template>

API

Attribute	Description	Type	Default
vertical	Vertical divider	boolean	false
color	Divider color	string	rgba(var(--u-rgb), 0.2)