Divider - Vant 4
Divider
➖ Create visual breathing room and organize your content with elegant dividers!
🎯 Intro
Meet the Divider component - your secret weapon for creating clean, organized layouts! 🚀 Whether you need to separate sections, add visual breaks, or include descriptive text between content areas, this versatile component delivers the perfect solution. From simple lines to custom styled separators, make your content structure crystal clear! ✨
📦 Install
Get your Divider component ready to organize your content! Register it globally via app.use and start creating beautifully structured layouts immediately! 🎯 Check out our Component Registration guide for more installation options.
import { createApp } from'vue'; import { Divider } from'vant'; const app = createApp(); app.use(Divider);🎨 Usage
➖ Basic Usage
The simplest way to add visual separation! Perfect for creating clean breaks between content sections without any fuss. 🌟
📝 With Text
Add descriptive text to your dividers! Great for section headers, categories, or any explanatory content that helps users understand what comes next. 💬
📍 Content Position
Take control of text placement! Position your divider text on the left, center, or right to match your design needs perfectly. 🎯
🔸 Dashed
Switch to a dashed style for a softer, more subtle visual separation! Perfect when you want to divide content without creating harsh visual breaks. ✨
🎨 Custom Style
Make it uniquely yours! Customize colors, spacing, and styling to match your brand and design system perfectly. 🌈
↕️ Vertical
Need vertical separation? Switch to vertical mode for side-by-side content layouts! Perfect for creating columns or separating inline elements. 📐
API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| dashed | Whether to use dashed border | boolean | false |
| hairline | Whether to use hairline | boolean | true |
| content-position | Content position, can be set to left``right | string | center |
vertical v4.4.0 | Whether to use vertical | boolean | false |
Slots
| Name | Description |
|---|---|
| default | content |
Types
The component exports the following type definitions:
importtype { DividerProps, DividerContentPosition } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-divider-margin | var(--van-padding-md) 0 | - |
| --van-divider-vertical-margin | 0 var(--van-padding-xs) | - |
| --van-divider-text-color | var(--van-text-color-2) | - |
| --van-divider-font-size | var(--van-font-size-md) | - |
| --van-divider-line-height | 24px | - |
| --van-divider-border-color | var(--van-border-color) | - |
| --van-divider-content-padding | var(--van-padding-md) | - |
| --van-divider-content-left-width | 10% | - |
| --van-divider-content-right-width | 10% | - |
## 🔗 Related Docs
- [Cell](./cell) - List item components with built-in dividers
- [List](./list) - Organized content lists
- [Grid](./grid) - Layout grid system
- [Space](./space) - Flexible spacing components
- [Card](./card) - Content container components
- [Panel](./panel) - Collapsible content panels
- [ConfigProvider](./config-provider) - Global configuration
- [Advanced Usage](./advanced-usage) - Advanced component techniques