Source: https://primeng.org/classnames

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

ClassNames

ClassNames provides extended class binding functionality that is not possible with the native Angular directives.

Import #

import { ClassNamesModule } from 'primeng/classnames'

Examples #

pClass directive accepts a string, array, object or any combination of these types with support for nesting. Angular's native class directive does not support combining multiple types with a single directive, nor white-space separated values in a single string.

Note: For Tailwind Users, it is recommended to use the classAttributes configuration for intellisense support.

pClass Directive

String

Array

Combined

Nested

Native Class Directive

String

Array

Combined

<div class="flex flex-col gap-4"> <div class="font-semibold">pClass Directive</div> <div class="flex flex-wrap items-center gap-4"> <div pClass="py-4 px-8 border border-surface rounded-lg">String</div> <div [pClass]="['py-4', 'px-8', 'bg-primary text-primary-contrast', 'font-semibold', 'rounded-lg']">Array</div> <div [pClass]="['p-4 rounded-lg', ['cursor-pointer', 'select-none', 'border'], { 'bg-primary text-primary-contrast border-primary': active1() }]" (click)="toggle1()">Combined</div> <div [pClass]="nestedClasses()" (click)="toggle2()">Nested</div> </div> </div>

<div class="flex flex-col gap-4">
    <div class="font-semibold">Native Class Directive</div>
    <div class="flex flex-wrap items-center gap-4">
        <div class="py-4 px-8 border border-surface rounded-lg">String</div>
        <div [class]="['py-4', 'px-8', 'bg-primary', 'text-primary-contrast', 'font-semibold', 'rounded-lg']">Array</div>
        <div
            class="p-4 rounded-lg"
            [class]="['cursor-pointer', 'select-none', 'border']"
            [class.bg-primary]="active1()"
            [class.text-primary-contrast]="active1()"
            [class.border-surface]="active1()"
            [class.border-primary]="active1()"
            (click)="toggle1()"
        >
            Combined
        </div>
    </div>
</div>

• Import

• Examples

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

PrimeNG 20.3.0 by PrimeTek