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 "ui-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 PrimeNG itself. In addition, online ThemeRoller designer allows you to create a PrimeNG easily.
PrimeNG will also support premium themes and layouts derived from PrimeFaces. Upcoming layout Ultima will be available at the end of September 2016.