Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add dividerDivider
The Divider component is used to visually separate content with a horizontal or vertical line.
Before divider
After divider
import { Component } from '@angular/core';
import { ZardDividerComponent } from '../divider.component';
@Component({
selector: 'z-demo-divider-default',
imports: [ZardDividerComponent],
standalone: true,
template: `
<div class="flex flex-col">
<p>Before divider</p>
<z-divider />
<p>After divider</p>
</div>
`,
})
export class ZardDemoDividerDefaultComponent {}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
Before divider
After divider
import { Component } from '@angular/core';
import { ZardDividerComponent } from '../divider.component';
@Component({
selector: 'z-demo-divider-default',
imports: [ZardDividerComponent],
standalone: true,
template: `
<div class="flex flex-col">
<p>Before divider</p>
<z-divider />
<p>After divider</p>
</div>
`,
})
export class ZardDemoDividerDefaultComponent {}
vertical
Left
Right
import { Component } from '@angular/core';
import { ZardDividerComponent } from '../divider.component';
@Component({
selector: 'z-demo-divider-vertical',
imports: [ZardDividerComponent],
standalone: true,
template: `
<div class="flex h-20">
<p>Left</p>
<z-divider zOrientation="vertical" />
<p>Right</p>
</div>
`,
})
export class ZardDemoDividerVerticalComponent {}