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

    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 リファレンス

    • ColorEditor

    その他のリソース