ngx-kit - styler
npm install @ngx-kit/styler
npm install @ngx-kit/styler --save
typescript
import { StylerModule } from '@ngx-kit/styler';
...
@NgModule({
imports: [
...
StylerModule.forRoot(),
...
`
Use import with .forRoot() only once on the top level.
$3
`typescript
...
@Component({
...
viewProviders: [StylerComponent]
...
constructor(private styler: StylerComponent) {
this.styler.register({
wrapper: {
background: '#ffffff',
color: 'red',
},
inside: {
color: 'yellow',
fontSize: '2rem',
}
});
...
`
$3
`html
`
Cases
$3
Just define host element:
`typescript
this.styler.register({
host: {
display: 'flex',
flexDirection: 'column',
},
});
`
$3
`typescript
this.styler.register({
wrapper: {
$nest: {
'&:hover': {
background: 'grey',
},
'& a': {
textDecoration: 'none',
},
},
},
});
`
$3
`typescript
this.styler.register({
wrapper: {
display: 'flex',
flexDirection: 'row',
$media: [
[{maxWidth: 600}, {
flexDirection: 'column',
}],
],
},
});
`
$3
Define element states:
`typescript
constructor(private def: StylerDefService)
...
this.styler.register({
host: {
...
},
panel: (state) => {
border: '1px solid green',
// multi-state
...this.def.pick(state.size, {
small: {
padding: 2,
},
medium: {
padding: 4,
},
large: {
padding: 8,
},
}, 'medium'),
// bool-state
...this.def.toggle(state.disabled, {
color: '#666',
background: '#999'
}),
},
...
});
`
Set state via service for host:
`typescript
this.styler.host.applyState({size: 'small'});
`
Or set state with styler directive:
`html
`
$3
Provide styler view built-it module method:
`typescript
@Component({
...
viewProviders: [StylerModule.forComponent(ThisComponentStyle)],
`
Define style injectable:
`typescript
import { Injectable } from '@angular/core';
import { ComponentStyle, StylerDefService, StyleDef } from '@ngx-kit/styler';
@Injectable()
export class ThisComponentStyle implements ComponentStyle {
constructor(private def: StylerDefService) {
}
host(): StyleDef {
return {
display: 'block',
};
}
wrapper(): StyleDef {
return {
background: '#ffffff',
color: 'red',
};
}
// state handling
panel(state): StyleDef {
return {
border: '1px solid green',
// multi-state
...this.def.pick(state.size, {
small: {
padding: 2,
},
medium: {
padding: 4,
},
large: {
padding: 8,
},
}, 'medium'),
// bool-state
...this.def.toggle(state.disabled, {
color: '#666',
background: '#999'
}),
};
};
}
`
$3
Styles deep-merged from left to right.
`typescript
this.styler.register([
{
host: {
background: '#ffffff',
color: 'yellow'
},
},
{
host: {
color: 'red',
fontSize: '1.1rem',
},
},
]);
`
Similar to:
`typescript
this.styler.register([
{
host: {
background: '#ffffff',
color: 'red',
fontSize: '1.1rem',
},
},
]);
`
Provide few separated styles to component:
`typescript
viewProviders: [
StylerModule.forComponent(LayoutStyle),
StylerModule.forComponent(ThisComponentStyle),
],
`
$3
TBD
$3
* padding: [10, 20] => padding: '10px 20px'
* padding: {top: 10, left: 30} => paddingTop: '10px', paddingLeft: '30px'
* margin: [10, 20, 30] => padding: '10px 20px 30px'
* border: [1, 'solid', 'blue'] => border: '1px solid blue'
$3
TBD
$3
`typescript
constructor(private styler: StylerComponent) {
this.styler.register({
host: {
animationDuration: '1s',
animationName: this.styler.keyframes({
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
}),
animationTimingFunction: 'linear',
animationIterationCount: 'infinite',
},
});
}
`
$3
Styler can add classes to elements. Class attribute based on component name (should be setted), element name and element state.
Provide BemClassGenStrategy:
`typescript
providers: [
{
provide: ClassGenStategy,
useClass: BemClassGenStrategy,
},
],
`
Set component name:
`typescript
constructor(private styler: StylerComponent) {
this.styler.classPrefix = 'component-name';
}
`
Helpers
$3
* defPick(state: string, styles: StyleDef, default?: string) - returns styles[state|default]
* defToggle(state: boolean, styles: StyleDef, falseStyles?: StyleDef) - returns styles if state is true
* defMerge(styles: StyleDef[]) - js deepMerge, needed if states have $nest props
$3
Helpers for color manipulating.
`ts
...
background: darken(0.2, someColorVar),
`
* adjustHue
* complement
* darken
* desaturate
* grayscale
* hsl
* hsla
* invert
* lighten
* mix
* opacify
* rgb
* rgba
* saturate
* setHue
* setLightness
* setSaturation
* shade
* tint
* toColorString
* transparentize`