Web Components Color Editor (カラー エディター) の概要 Preview

Ignite UI for Web Components Color Editor は軽量のカラー ピッカー コンポーネントです。Color Editor は、ブラッシ アイコンをクリックすると開きます。RGBA 値と 16 進値の両方を、下部にある目的の色から取得できます。これらの値は、3 つのスライダーが変更されると更新されます。中央のボックスは、彩度と明度を調整するために設計されており、隣接する 2つ のスライダーで rgb 値と輝度値を調整できます。RGB は (1～255) の範囲で登録されます。明度は (0～1) の範囲で登録されます。

Web Components Color Editor の例

依存関係

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents-core
npm install igniteui-webcomponents-inputs

ColorEditor を使用する前に、次のモジュールを登録する必要があります:

import { IgcColorEditorModule } from "igniteui-angular-inputs";

@NgModule({
    imports: [
        IgcColorEditorModule
    ]
})
export class AppModule {}

import { IgcColorEditorModule, IgcColorEditorComponent } from 'igniteui-webcomponents-inputs';

ModuleManager.register(
    IgcColorEditorModule
);

使用方法

ColorEditor の使用を開始する最も簡単な方法は次のとおりです:

<igc-color-editor
    name="colorEditor"
    id="colorEditor">
</igc-color-editor>

イベントにバインド

Color Editor コンポーネントは、次のイベントを発生させます:

• valueChanged
• valueChanging

this.OnValueChanged = this.OnValueChanged.bind(this);
this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
this.colorEditor.valueChanged = this.OnValueChanged;

API リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)