md color picker

MD彩色挑选

没有jQuery或其他DOM/实用程序库依赖性的基于角色的彩色选择器。

演示

在此处尝试演示： GitHub页面

安装

NPM

1. 下载tinycolor.js 1.2.1或更高版本。其他版本可能会起作用，尽管使用1.2.1来开发它。
2. 安装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 >

免责声明

这仍处于非常早的测试版中，并且正在迅速变化（在初始提交之前有3个版本）。我对任何人都愿意投入的任何帮助。将随着我们的使用而更新。

已知问题 /待办事项

[]将MD彩色奖励分解为其他指令，MD-Color-Picker-preview，Input等。[]添加I18N支持。 []重构少[]添加可选的SASS文件[] IE 11问题[]内联下拉模式[]验证