颜色拾取器
又一个漂亮的取色器
快速链接
兼容性
| 角质 | @ acrodata/ 取色器 |
|---|---|
| 页:1 | 1.x 运算 |
安装
npm install @acrodata/color-picker --save
使用量
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ColorPicker } from '@acrodata/color-picker';
@Component({
selector: 'your-app',
template: `
<color-picker [(ngModel)]="color" />
<color-picker [(value)]="color" />
`,
imports: [FormsModule, ColorPicker],
})
export class YourAppComponent {
color = '#ff0000';
}
API 密码
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| [价值] | 字符串 | #000 | 初发相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. |
| [格式] | 颜色格式 | undefined | 取色器的输出格式 . |
| [海德阿尔法] | 布尔 | false | 是否隐藏 Alpha 通道 . |
| (格式变化) | 事件编辑器 < 颜色格式 > | - | 颜色格式被更改时所释放的事件 . |
| (数值变化) | 事件Emitter < string> | - | 当值变化时事件会释放出 . |
| (数值变化完成) | 事件Emitter < string> | - | 当值变化完成时释放出事件 . |
| (颜色变化) | 事件编辑器 < 颜色变化 > | - | 颜色变化时事件会释放出 . |
| (颜色变化完成) | 事件编辑器 < 颜色变化 > | - | 当颜色变化完成时, 事件释放 . |
CSS 变量
--cp-container-width
--cp-container-shape
--cp-container-padding
--cp-container-margin
--cp-container-elevation-shadow
--cp-container-background-color
--cp-container-text-color
--cp-input-shape
--cp-input-background-color
--cp-input-outline-color
--cp-input-hover-outline-color
--cp-input-focus-outline-color
--cp-input-text-font
--cp-icon-button-shape
--cp-icon-button-text-color
--cp-icon-button-background-color
--cp-icon-button-hover-background-color
--cp-icon-button-active-background-color
--cp-icon-button-focus-background-color
--cp-icon-button-focus-outline-color
--cp-saturation-picker-shape
--cp-saturation-picker-thumb-size
--cp-saturation-picker-thumb-shape
--cp-saturation-picker-thumb-shadow
--cp-saturation-picker-thumb-outline-color
--cp-saturation-picker-thumb-focus-outline-color
--cp-slider-width
--cp-slider-height
--cp-slider-shape
--cp-slider-thumb-width
--cp-slider-thumb-height
--cp-slider-thumb-shape
--cp-slider-thumb-background-color
--cp-slider-thumb-shadow
--cp-slider-thumb-outline-color
--cp-slider-thumb-focus-outline-color
许可证
麻省理工学院