MD彩色挑选
没有jQuery或其他DOM/实用程序库依赖性的基于角色的彩色选择器。
演示
在此处尝试演示： GitHub页面
安装
NPM
- 下载tinycolor.js 1.2.1或更高版本。其他版本可能会起作用，尽管使用1.2.1来开发它。
- 安装
md-color-picker。
npm install md-color-picker鲍尔（包括tinycolor.js）：
bower install md-color-picker角依赖性
- 角材料
- ngcookies（可选）
其他依赖性
唯一的其他依赖性是tinycolor.js，它是一个特殊的颜色操纵库。
用法
- 包括CSS。
< link href =" path/to/md-color-picker/dist/mdColorPicker.min.css " rel =" stylesheet " />- 包括JavaScript。
< script src =" path/to/tinycolor/dist/tinycolor-min.js " > script >
< script src =" path/to/md-color-picker/dist/mdColorPicker.min.js " > script >- 将依赖项添加到您的应用程序（ngcookies是可选的）
var app = angular . module ( 'myApp' , [ 'ngMaterial' , 'ngCookies' , 'mdColorPicker' ] ) ;- 将指令放置在需要的任何地方。注意：这打破了旧版本0.1，因为它现在使用ng模型而不是价值
< div md-color-picker ng-model =" valueObj " > div > 选项
选项可以由md-color-picker属性和/或使用属性上的选项对象设置。如果在选项对象和属性上都存在一个选项，则该属性将优先。
范围对象设置选项
// Controller
$scope . scopeVariable . options = {
label : "Choose a color" ,
icon : "brush" ,
default : "#f00" ,
genericPalette : false ,
history : false
} ; < div md-color-picker =" scopeVariable.options " ng-model =" scopeVariable.color " > div >通过属性设置选项
< div
md-color-picker
ng-model =" scopeVariable.color "
label =" Choose a color "
icon =" brush "
default =" #f00 "
md-color-generic-palette =" false "
md-color-history =" false "
> div >| 选项对象名称 | 属性选项名称 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| 类型 | 类型 | int | 0 | 默认输出类型。 0：HEX，1：RGB，2：HSL |
| 标签 | 标签 | 细绳 | “” | 输入的款项。 |
| 图标 | 图标 | 细绳 | “” | 材料图标名称。 https://design.*go*o*gle.com/icons/ |
| 随机的 | 随机的 | 布尔 | 错误的 | 在打开时选择随机颜色 |
| 默认 | 默认 | 颜色 | “ RGB（255,255,255）” | 默认颜色 |
| openoninput | 开放输入 | 布尔 | 真的 | 当用户单击输入字段时，打开彩色选择器。如果禁用，则只有在单击预览时才会打开颜色选择器。 |
| hasbackdrop | has-backdrop | 布尔 | 真的 | 对话框背景。 https://material.angu*l**arjs.org/latest/api/service/quljmdialog |
| ClickoutsIdetoclose | 单击接口 | 布尔 | 真的 | 对话框单击外面关闭。 https://material.angu*l**arjs.org/latest/api/service/quljmdialog |
| 跳过 | 跳过 | 布尔 | 真的 | 允许打开多个对话框。角/材料＃7262 |
| 保存距 | 保存scope | 布尔 | 真的 | 对话框保存。 https://material.angu*l**arjs.org/latest/api/service/quljmdialog |
| Clearbutton | MD-Color-Clear-Button | 布尔 | 真的 | 显示输入内部的“清除”按钮。 |
| 预览 | MD-Color-Preview | 布尔 | 真的 | 显示输入旁边的颜色预览圆圈。 |
| Alphachannel | MD-Color-Alpha-channel | 布尔 | 真的 | 启用alpha通道。 |
| 光谱 | MD彩色 - 光谱 | 布尔 | 真的 | 显示频谱选项卡。 |
| 滑块 | MD彩色菜单 | 布尔 | 真的 | 显示“滑块”选项卡。 |
| 仿制药 | MD彩色 - 底板 | 布尔 | 真的 | 显示通用调色板选项卡。 |
| 物料板 | MD颜色 - 材料板 | 布尔 | 真的 | 显示材料颜色调色板选项卡。 |
| 历史 | MD颜色历史 | 布尔 | 真的 | 显示“历史记录”选项卡。 |
| 十六进制 | MD-Color-Hex | 布尔 | 真的 | 显示“十六进制值”选项卡。 |
| RGB | MD-Color-RGB | 布尔 | 真的 | 显示RGB值选项卡。 |
| HSL | MD-Color-HSL | 布尔 | 真的 | 显示“ HSL值”选项卡。 |
| DefaultTab | MD-Color-Default-tab | 字符串，int | “光谱” | 打开时应选择哪个选项卡。可以是字符串或索引。如果该值是索引，请不要计算隐藏/禁用选项卡。
|
免责声明
这仍处于非常早的测试版中，并且正在迅速变化（在初始提交之前有3个版本）。我对任何人都愿意投入的任何帮助。将随着我们的使用而更新。
已知问题 /待办事项
[]将MD彩色奖励分解为其他指令，MD-Color-Picker-preview，Input等。[]添加I18N支持。 []重构少[]添加可选的SASS文件[] IE 11问题[]内联下拉模式[]验证
下载源码
通过命令行克隆项目:
git clone https://github.com/brianpkelley/md-color-picker.git