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

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

Angular Color Editor の例

依存関係

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

npm install igniteui-angular-core
npm install igniteui-angular-inputs

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

使用方法

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

<igx-color-editor
    name="colorEditor"
    #colorEditor>
    </igx-color-editor>
</div>

イベントにバインド

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

• valueChanged
• valueChanging

@ViewChild("colorEditor", { static: true } )
private colorEditor: IgxColorEditorComponent
public ngAfterViewInit(): void
{
    this.colorEditor.valueChanged.subscribe(this.onValueChanged);
}

public onValueChanged = (e: any) => {
    console.log("test");
}

API リファレンス

その他のリソース

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