jiaiyan Naive UI Divider Component
Divider component for visually separating content sections with horizontal or vertical lines.
When to Use
Use this component when:
- Content separation: Divide different sections of content
- Visual grouping: Create visual breaks between related items
- Title dividers: Add labeled section dividers
- Inline separation: Separate inline elements vertically
When to Invoke
Invoke this skill when:
- User needs to separate content sections
- User wants a divider with a title or label
- User needs vertical dividers for inline content
- User wants dashed or solid line styles
- User asks about title placement options
Features
- Horizontal/Vertical: Support for both orientations
- Title Support: Add titles with customizable placement
- Dashed Style: Option for dashed line style
- Simple API: Minimal props for easy usage
API Reference
Divider Props
| Name | Type | Default | Description |
|---|---|---|---|
| dashed | boolean |
false |
Whether to show dashed line. |
| title-placement | 'left' | 'right' | 'center' |
'center' |
Title placement. |
| vertical | boolean |
false |
Whether to show vertical direction. |
Divider Slots
| Name | Parameters | Description |
|---|---|---|
| default | () |
The title of divider. |
Basic Usage
Basic Horizontal Divider
<template>
<div>
<p>First section content</p>
<n-divider />
<p>Second section content</p>
</div>
</template>
Divider with Title
<template>
<div>
<p>First section content</p>
<n-divider>Title Center</n-divider>
<p>Second section content</p>
</div>
</template>
Title Placement
<template>
<div>
<p>Content above</p>
<n-divider title-placement="left">Left Title</n-divider>
<p>Content in between</p>
<n-divider title-placement="right">Right Title</n-divider>
<p>Content below</p>
</div>
</template>
Dashed Divider
<template>
<div>
<p>Content above</p>
<n-divider dashed>Dashed Line</n-divider>
<p>Content below</p>
</div>
</template>
Common Patterns
Vertical Divider
<template>
<div>
Text
<n-divider vertical />
Link
<n-divider vertical />
Button
</div>
</template>
Section Dividers in Card
<template>
<n-card title="Card Title">
<div>First section</div>
<n-divider />
<div>Second section</div>
<n-divider />
<div>Third section</div>
</n-card>
</template>
Form Section Dividers
<template>
<n-form>
<n-form-item label="Name">
<n-input />
</n-form-item>
<n-form-item label="Email">
<n-input />
</n-form-item>
<n-divider>Address Information</n-divider>
<n-form-item label="Street">
<n-input />
</n-form-item>
<n-form-item label="City">
<n-input />
</n-form-item>
</n-form>
</template>
Navigation with Vertical Dividers
<template>
<n-space align="center">
<n-button text>Home</n-button>
<n-divider vertical />
<n-button text>Products</n-button>
<n-divider vertical />
<n-button text>About</n-button>
<n-divider vertical />
<n-button text>Contact</n-button>
</n-space>
</template>
Styled Divider with Icon
<template>
<n-divider>
<n-icon :component="StarIcon" />
</n-divider>
</template>
Breadcrumb Alternative
<template>
<n-space align="center">
<n-text depth="3">Step 1</n-text>
<n-divider vertical />
<n-text depth="3">Step 2</n-text>
<n-divider vertical />
<n-text type="primary">Step 3</n-text>
</n-space>
</template>
Dashed with Left Title
<template>
<n-divider dashed title-placement="left">
Optional Section
</n-divider>
</template>
Best Practices
Use for logical separation: Dividers should separate logically distinct content
<div>Personal Info</div> <n-divider /> <div>Professional Info</div>Vertical for inline elements: Use vertical dividers for inline content
<span>Item 1</span> <n-divider vertical /> <span>Item 2</span>Title placement: Use title placement to match visual hierarchy
<n-divider title-placement="left">Section Title</n-divider>Dashed for optional sections: Use dashed style to indicate optional content
<n-divider dashed>Optional</n-divider>Avoid overuse: Don't use dividers excessively; whitespace can be sufficient
Combine with spacing: Add appropriate spacing around dividers
<n-space vertical size="large"> <div>Content</div> <n-divider /> <div>Content</div> </n-space>