React Input (入力) の概要
Ignite UI for React Input は、ユーザーがデータを入力できるコンポーネントです。
React Input の例
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrInput とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrInput type="email" label="Subscribe"></IgrInput>
Prefix と Suffix
prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。次のサンプルでは、テキスト プレフィックスとアイコン サフィックスを使用して新しい Input フィールドを作成します:
ヘルパー テキスト
helper-text スロットは、入力の下に配置されたヒントを提供します。Phone Input にヘルパー テキストを追加しましょう:
Input のサイズ設定
ユーザーが --ig-size CSS 変数を使用して IgrInput のサイズを変更できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびに、Input のサイズを変更します。
上記のサンプルでは、次の属性の使用法を示しています:
required- 入力を必須としてマークするために使用されます。disabled- 入力を無効にするために使用されます。readonly- 入力を読み取り専用としてマークするために使用されます。
スタイル設定
IgrInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:
| 名 | 説明 |
|---|---|
container |
すべての主要な入力要素を保持するメイン ラッパー。 |
input |
ネイティブ入力要素。 |
label |
ネイティブ ラベル要素。 |
prefix |
プレフィックス ラッパー。 |
suffix |
サフィックス ラッパー。 |
helper-text |
ヘルパー テキスト ラッパー。 |
igc-input::part(input) {
background-color: var(--ig-primary-100);
border-color: var(--ig-secondary-500);
box-shadow: none;
}
igc-input::part(label) {
color: var(--ig-gray-700);
}
igc-input::part(prefix),
igc-input::part(suffix) {
color: var(--ig-primary-600-contrast);
background-color: var(--ig-primary-600);
border-color: var(--ig-secondary-600);
}