PUDivider Component
A hand-drawn style divider component for creating visual separations with various styles and orientations
Usage
Basic Usage
Content above
Content below
Vertical Divider
Left content
Right content
Different Styles
content
content
content
content
With Text
content
Section Title
content
Different Sizes
content
content
content
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| orientation | horizontal | vertical | No | horizontal | Divider orientation |
| dividerStyle | solid | dashed | dotted | wavy | No | solid | Divider line style |
| text | string | No | '' | Text to display in the divider |
| size | small | medium | large | No | medium | Divider thickness |
| customClass | string | No | '' | Custom CSS classes |
Features
- Hand-drawn style visual effects
- Multiple orientations: horizontal and vertical
- Various line styles: solid, dashed, dotted, wavy
- Text support with background masking
- Different sizes for thickness control
- Dark mode support
- Responsive design
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API