angular版 拾色器組件

歡迎關注github:https://github.com/myopenresources

angular版 拾色器組件

安裝

npm install cc-color-picker --save 或 yarn add cc-color-picker

使用

// 業務模塊

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

 

import { ColorPickerModule } from 'cc-color-picker';

 

import { AppComponent } from './app.component';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    ColorPickerModule,

    FormsModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

//業務html

<div>

  <cc-color-picker [(ngModel)]="selectColor"></cc-color-picker>

</div>

 

//業務組件

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.less']

})

export class AppComponent {

 

  selectColor = '#00ff00';

}

 

 

參數

1. style: 樣式
2. styleClass: CSS
3. inline:是否內聯
4. format:分別是：hex、hsb、rgb，默認hex
5. disabled:是否可用
6. tabindex:TAB鍵在控件中的移動順序
7. inputId:Input的id
8. 可通過ngModel雙向綁定
9. colorPickerChange:顏色改事件，返回顏色