ColorPicker Module Name: ColorPickerModule
Module Name: ColorPickerModule
ColorPicker is a field with color palets that overlay it and return the selected color.
Showcase
Inline
<tl-colorpicker [mode]="'inline'" [returnFormatColor]="true" [ngModel]="'#5EC791'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Input
<tl-colorpicker [mode]="'input'" [returnFormatColor]="true" [openFocus]="true" [ngModel]="'#f44336'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Copy Button
<tl-colorpicker [mode]="'input'" [copyButton]="true" [recentColors]="true" [ngModel]="'#9c27b0'" [returnFormatColor]="true" [openFocus]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Label
<tl-colorpicker [mode]="'input'" [label]="'Color Picker'" [labelSize]="'100px'" [ngModel]="'#3f51b5'" [recentColors]="true" [returnFormatColor]="true" [openFocus]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
From Origin
<tl-colorpicker [mode]="'fromOrigin'" [elementOrigin]="button" [recentColors]="true" [ngModel]="'#2196f3'" [returnFormatColor]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Only Color
<tl-colorpicker [mode]="'onlyColor'" [recentColors]="true" [returnFormatColor]="true" [ngModel]="'#4caf50'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
copyButton | bollean | false | Display copy button. | true | false |
elementOrigin | element | null | Define a element of origin. | variable local |
label | string | null | Create a label together with Input Element | any text |
labelSize | string | 100px | Width of label text | px | % | em |
mode | string | input | Define a view. | inline | onlyColor | fromOrigin | input |
recentColors | bollean | false | Display recent colors. | true | false |
returnFormatColor | bollean | false | Display color code. | true | false |
Events
Name | Parameters | Description |
---|---|---|
selectColor | selected : Color Selected | Dispatched when a color is selected. |