Overview
Divider component provides a visual separator between content sections.
Import
import { MagaryDivider } from 'ng-magary';
Basic Usage
<div>Section 1</div>
<magary-divider></magary-divider>
<div>Section 2</div>
Horizontal Divider (Default)
<p>Above divider</p>
<magary-divider [layout]="'horizontal'"></magary-divider>
<p>Below divider</p>
Vertical Divider
<div class="flex">
<span>Left</span>
<magary-divider [layout]="'vertical'"></magary-divider>
<span>Right</span>
</div>
With Content
<magary-divider [align]="'center'">
<span>OR</span>
</magary-divider>
Line Types
<magary-divider [type]="'solid'"></magary-divider>
layout
'horizontal' | 'vertical'
default:"'horizontal'"
Orientation of the divider
align
'left' | 'center' | 'right' | 'top' | 'bottom'
default:"'center'"
Alignment of content within divider
type
'solid' | 'dashed' | 'dotted'
default:"'solid'"
Line style of the divider
Usage Examples
<form>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<magary-divider [align]="'center'">
<span class="text-muted">OR</span>
</magary-divider>
<button class="btn-social">Login with Google</button>
Section Separator
<section>
<h2>About Us</h2>
<p>Company information...</p>
</section>
<magary-divider [type]="'dashed'"></magary-divider>
<section>
<h2>Our Services</h2>
<p>Service information...</p>
</section>
Vertical Navigation
<nav class="flex items-center gap-2">
<a href="/home">Home</a>
<magary-divider [layout]="'vertical'"></magary-divider>
<a href="/about">About</a>
<magary-divider [layout]="'vertical'"></magary-divider>
<a href="/contact">Contact</a>
</nav>
With Icon
<magary-divider [align]="'center'">
<lucide-icon name="chevron-down"></lucide-icon>
</magary-divider>
Features
- Horizontal/Vertical: Support for both orientations
- Content support: Text or icons in divider
- Alignment: Left, center, right, top, bottom
- Line styles: Solid, dashed, dotted
- Semantic HTML: Uses proper separator role
- Lightweight: Minimal styling
Accessibility
- Uses
role="separator" for screen readers
aria-orientation attribute- Semantic HTML structure
