Blazor Mask Input (マスク入力) の概要

Ignite UI for Blazor マスク入力は、構成可能なルールに基づいて、開発者がユーザー入力を制御し、表示される値を書式設定できるようにする入力フィールドです。入力オプションも構成できます。

Blazor マスク入力の例

使用方法

IgbMaskInput を使用する前に、次のように登録する必要があります:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));

また、IgbMaskInput コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。

マスクのルール

次の表は、サポートされている組み込みのマスク ルールを示しています:

これらのフラグは、コンポーネントの検証にも参加します。つまり、必要な位置のすべてではなく一部が満たされている場合、入力は無効になります (位置が満たされていない / 空の値は、依然として required の責任です)。これは、スタンドアロンの入力とフォームに含まれる場合の両方に適用されます。

マスクの適用

マスクの適用は非常に簡単です。必要なことは、入力の Mask プロパティに事前に決定されたパターンを提供することだけです。

以下の例では、内線番号付きの電話番号にマスクを適用します。

<IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999">
    <IgbIcon IconName="phone" Collection="material" slot="prefix"></IgbIcon>
    <span slot="helper-text">Phone number</span>
</IgbMaskInput>

その後、ブラウザーに次のように表示されます:

プロンプト文字

開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、Prompt プロパティに任意の文字を指定するだけです:

<IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999" Prompt="-"></IgbMaskInput>

デフォルトでは、prompt 文字はアンダースコアです。

プレースホルダー

開発者は、ネイティブ入力プレースホルダー属性の目的を果たす Placeholder プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。

<IgbMaskInput @ref="MaskInputRef" Mask="00/00/0000" Placeholder="dd/MM/yyyy"></IgbMaskInput>

値モード

IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために raw および withFormatting オプションを選択できる ValueMode プロパティを公開します。デフォルトでは、ValueMode は raw に設定されています。以下の例をご覧ください:

スタイル設定

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

igc-mask-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}

仮定と制限

• マスクされた入力は、常にテキスト型の入力であるため、type 属性を公開しません。
• 元に戻す / やり直しの動作は現在サポートされていません。

API リファレンス

その他のリソース

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