DaffColorableDirective

The DaffColorableDirective allows a component to conditionally apply color-specific styles by setting CSS classes based on the specified color. This directive is useful for applying different color palettes to a component in an Angular application.

Usage

Example

<div daffColorable [color]="componentColor">Colored content</div>

Styles

The directive applies the following CSS classes based on the color:

  • daff-primary: Applied when the color is primary.
  • daff-secondary: Applied when the color is secondary.
  • daff-tertiary: Applied when the color is tertiary.
  • daff-black: Applied when the color is black.
  • daff-white: Applied when the color is white.
  • daff-theme: Applied when the color is theme.
  • daff-theme-contrast: Applied when the color is theme-contrast.

Selector: '[daffColorable]'

Properties

Name Type Description
@Input() color DaffPalette Sets the color on a component. defaultColor DaffPalette Sets a default color.
ngOnChanges
ngOnInit
Graycore, LLC © 2018 - 2024. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.