Blazor Input (入力) の概要
Ignite UI for Blazor Input は、ユーザーがデータを入力できるコンポーネントです。
Blazor Input の例
依存関係
Input コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
また、追加の CSS ファイルをリンクして、スタイルを IgbInput コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbInput DisplayType="@InputType.Email" Label="Subscribe" Placeholder="john.doe@mail.com" />
Prefix と Suffix
prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。次のサンプルでは、テキスト プレフィックスとアイコン サフィックスを使用して新しい Input フィールドを作成します:
ヘルパー テキスト
helper-text スロットは、入力の下に配置されたヒントを提供します。Phone Input にヘルパー テキストを追加しましょう:
Input のサイズ設定
ユーザーが --ig-size CSS 変数を使用して IgbInput のサイズを変更できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびに、Input のサイズを変更します。
上記のサンプルでは、次の属性の使用法を示しています:
required- 入力を必須としてマークするために使用されます。disabled- 入力を無効にするために使用されます。readonly- 入力を読み取り専用としてマークするために使用されます。
スタイル設定
Input コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、Input によって公開されるすべての CSS パーツを示します:
| 名 | 説明 |
|---|---|
| container | すべての主要な入力要素を保持するメイン ラッパー。 |
| input | ネイティブ入力要素。 |
| label | ネイティブ ラベル要素。 |
| prefix | プレフィックス ラッパー。 |
| suffix | サフィックス ラッパー。 |
| helper-text | ヘルパー テキスト ラッパー。 |
igc-input::part(input) {
background-color: rgb(169, 214, 229);
border-color: rgb(42, 111, 151);
}
igc-input::part(label) {
color: rgb(1, 42, 74);
}
igc-input::part(prefix),
igc-input::part(suffix) {
color: white;
border-color: rgb(42, 111, 151);
background-color: rgb(70, 143, 175);
}