DEV Community

loading...
Cover image for Angular Divider

Angular Divider

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app