React Color Editor (カラーエディター) の概要 (プレビュー)

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

React Color Editor の例

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrColorEditorModule } from "@infragistics/igniteui-react-inputs";
import { IgrColorEditor } from "@infragistics/igniteui-react-inputs";

const mods: any[] = [
    IgrColorEditorModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private colorEditor: IgrColorEditor
    private colorEditorRef(r: IgrColorEditor) {
        this.colorEditor = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.colorEditorRef = this.colorEditorRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">

            <div className="container fill">
                <IgrColorEditor
                    ref={this.colorEditorRef}>
                </IgrColorEditor>
            </div>
        </div>
        );
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

依存関係

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

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

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

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

IgrColorEditorModule.register();
tsx

使用方法

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

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

イベントにバインド

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

valueChanged
valueChanging

<IgrColorEditor valueChanged={this.onValueChanged} />

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

}
tsx

API リファレンス

ColorEditor

React Color Editor (カラー エディター) の概要 (プレビュー)