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

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

Web Components Color Editor の例

import { IgcColorEditorModule } from 'igniteui-webcomponents-inputs';
import { IgcColorEditorComponent } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcColorEditorModule
);

export class Sample {

    private colorEditor: IgcColorEditorComponent

    constructor() {
        var colorEditor = this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="container fill">
        <igc-color-editor
        name="colorEditor"
        id="colorEditor">
        </igc-color-editor>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

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

css

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

依存関係

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

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

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

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

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

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

ModuleManager.register(
    IgcColorEditorModule
);
ts

使用方法

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

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

イベントにバインド

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

valueChanged
valueChanging

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

API リファレンス

ColorEditor

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