@fusoionic/ng-tailwind-color
v1.3.2
Published
Angular helper functions/pipe for coloring (build on top of TinyColor2)
Downloads
10
Maintainers
Readme
Installation
npm i @fusoionic/ng-tailwind-color
Usage
Module:
Import TailwindModule
from @fusoionic/ng-tailwind-color
import { TailwindModule } from '@fusoionic/ng-tailwind-color';
@NgModule({
imports: [
TailwindModule.forRoot({ ... }), // inject services
TailwindModule, // inject pipes
]
})
Resolve color
Resolve color with pipe
<!-- Tailwind string -->
<span [style.color]="'red-500' | twHex"></span>
<!-- Tailwind string with alpha/opacity -->
<span [style.color]="'red-500/50' | twRgb"></span> <!-- 50 = 0.5 -->
import {TailwindService} from '@fusoionic/ng-tailwind-color';
export class AppComponent implements OnInit {
constructor(
private twService: TailwindService,
){}
ngOnInit(){
this.twService.resolve('red-500').darken(50).toHex();
}
}
Available Pipes
twHex - Resolves color to HEX
twRgb - Resolves color to RGBA
twHsl - Resolves color to HSL
twHsv - Resolves color to HSV
twInvertHex - Inverts color and returns it as HEX
twInvertRgb - Inverts color and returns it as RGBA
twInvertHsl - Inverts color and returns it as HSL
twInvertHsv - Inverts color and returns it as HSV
twLightenHex - Lightens color by given amount and returns it as HEX
twLightenRgb - Lightens color by given amount and returns it as RGBA
twLightenHsl - Lightens color by given amount and returns it as HSL
twLightenHsv - Lightens color by given amount and returns it as HSV
twDarkenHex - Darkens color by given amount and returns it as HEX
twDarkenRgb - Darkens color by given amount and returns it as RGBA
twDarkenHsl - Darkens color by given amount and returns it as HSL
twDarkenHsv - Darkens color by given amount and returns it as HSV