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 コンポーネントをインポートしたら、使用を開始する準備ができているので、最初の Input を追加しましょう。

<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 - 入力を読み取り専用としてマークするために使用されます。

スタイル設定

IgbInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:

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);
}

API リファレンス

その他のリソース

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