DEV Community

loading...
Cover image for Angular Fieldset

Angular Fieldset

primetek profile image PrimeTek ・1 min read

Angular Fieldset is a grouping component with the optional content toggle feature.

Setup

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

Import

import {FieldsetModule} from 'primeng/fieldset';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Fieldset is defined with p-fieldset element.

<p-fieldset legend="Header">
    Content
</p-fieldset>
Enter fullscreen mode Exit fullscreen mode

Toggleable

Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.

<p-fieldset legend="Header" [toggleable]="true">
    Content
</p-fieldset>
Enter fullscreen mode Exit fullscreen mode

Custom Legend

Header section can be customized using header template.

<p-fieldset>
    <ng-template pTemplate="header">Custom Legend Content</ng-template>
    Content
</p-fieldset>
Enter fullscreen mode Exit fullscreen mode

Animation Configuration

Transition of toggle animation can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.86, 0, 0.07, 1), example below disables the animation altogether.

<p-fieldset [transitionOptions]="'0ms'">
</p-fieldset>
Enter fullscreen mode Exit fullscreen mode

Theming

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

Resources

Visit the PrimeNG Fieldset showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app