These style classes define the skeleton of the components and include css properties such as margin, padding, display type, dimensions and positioning.
Skinning defines the look and feel properties like colors, border colors, background images.
Style Class | Applies |
---|---|
ui-widget | All PrimeNG components |
ui-widget-header | Header section of a component |
ui-widget-content | Content section of a component |
ui-state-default | Default state of a clickable element |
ui-state-hover | Hover state of a clickable element like mouse over |
ui-state-active | Active state of a clickable element like mouse press |
ui-state-highlight | Highlighed elements |
ui-state-disabled | Disabled elements |
fa | Icon elements based on font awesome |
These classes are not aware of structural css like margins and paddings, mostly they only define colors. This clean separation brings great flexibility in theming because you don’t need to know each and every skinning selectors of components to change their style.
For example Panel component’s header section has the "pui-panel-titlebar" structural class, to change the color of a panel header you don’t need to about this class as "ui-widget-header" defines colors for panel header.
38 free themes are available for PrimeNG, these include the themeroller themes, twitter bootstrap theme and 3rd party themes. ThemeSwitcher on the top right section of the page dynamically changes the theme at demo pages. Themes are distributed along with PrimeUI itself.
In addition to free themes, PrimeNG will also support premium themes and layouts derived from PrimeFaces and PrimeUI projects. Once the component size reaches around 50 components, these themes and layouts will be ported to PrimeNG as well. For more information and full list of themes and layouts, visit PrimeFaces Gallery.