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

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

React Color Editor の例

依存関係

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

npm install igniteui-react-core
npm install igniteui-react-inputs

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

import { IgrColorEditor, IgrColorEditorModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrColorEditorModule.register();

使用方法

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

<IgrColorEditor
    ref={this.colorEditorRef}>
</IgrColorEditor>

イベントにバインド

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

• valueChanged
• valueChanging

<IgrColorEditor valueChanged={this.onValueChanged} />

public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedValueChangedEventArgs) {

}

API リファレンス

その他のリソース

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