Angular Divider

Angular Divider is used to separate contents.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {DividerModule} from 'primeng/divider';

Getting Started

Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".

<div>Content 1</div>
<p-divider></p-divider>
<div>Content 2</div>

Border Style

Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".

<div>Content 1</div>
<p-divider type="dashed"></p-divider>
<div>Content 2</div>

Vertical Divider

Vertical divider is enabled by setting the layout property as "vertical".

<div class="p-d-flex">
    <div>Content 1</div>
    <p-divider layout="vertical"></p-divider>
    <div>Content 2</div>
    <p-divider layout="vertical"></p-divider>
    <div>Content 3</div>
</div>

Content

Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the align property. In horizontal layout, alignment options are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom".

<div>Content 1</div>
<p-divider align="left" type="dashed">
    <div class="p-d-inline-flex p-ai-center">
        <i class="pi pi-user p-mr-2"></i>
        <b>Icon</b>
    </div>
</p-divider>

<div>Content 2</div>

<p-divider align="center">
    <span class="p-tag">Badge</span>
</p-divider>

<div>Content 3</div>

<p-divider align="right">
    <p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
</p-divider>

<div>Content 4</div>

Theming

Divider supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Divider showcase for demos and documentation.