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.
<div daffColorable [color]="componentColor">Colored content</div>
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
.'[daffColorable]'
Name | Type | Description | |||
---|---|---|---|---|---|
@Input() color | DaffPalette |
Sets the color on a component. | defaultColor | DaffPalette |
Sets a default color. |
ngOnChanges | |||||
ngOnInit |