Input Group

Ignite UI for Angular コントロールは、フォーム入力を処理するためのモデル駆動型のアプローチを提供するリアクティブ フォームで簡単に使用できます。

Angular Input Group の例

使用方法

Input Group コンポーネントを初期化にするには、まず IgxInputGroupModule を igniteui-angular ツールキットにインポートします。

IgxInputGroup はテンプレート駆動フォームを使用するために FormsModule にも依存します。

// app.module.ts

...
import { IgxInputGroupModule } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@NgModule({
    ...
    imports: [..., IgxInputGroupModule, FormsModule],
    ...
})
export class AppModule {}

Note

igxInput、igxLabel、igx-preix、igx-suffix または igx-hint ディレクティブを使用するには、<igx-input-group> コンテナーでラップする必要があります。

例

Label および Input

igxLabel、igxInput ディレクティブとその検証、データ バインディング、API については、このトピックを参照してください。

Prefix および Suffix

igx-prefix / igxPrefix および igx-suffix / igxSuffix ディレクティブは、HTML 要素、文字列、アイコン、またはその他のコンポーネントを含むことができます。以下のサンプルでは、文字列 prefix とアイコン suffix を持つ新しい入力フィールドを作成します。

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" />
    <igx-icon igxSuffix>phone</igx-icon>
</igx-input-group>

Hint

igx-hint ディレクティブは、入力の下に配置されるヘルパー テキストを提供します。position プロパティの値に応じて、入力の開始または終了の位置に配置できます。以下は、phone 入力にヒントを追加します。

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
    <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>

ヒントを追加した phone フィールドは以下のようになります。

Input タイプと Input グループ タイプ トークン

入力グループのスタイルは、igxInputGroup コンポーネントの type プロパティを使用して変更できます。サポートされている入力グループ コンポーネントは、line (タイプが指定されていない場合のデフォルト)、border、box および search です。line、border および box タイプは、マテリアル デザイン テーマ専用に作成されています。これらのタイプを他のテーマで設定しても、入力グループの外観には影響しません。

特定の型を宣言的に設定する例:

<igx-input-group type="border">

IGX_input-group_TYPE インジェクション トークンを使用すると、すべての入力グループ インスタンスのタイプをアプリケーション レベルで指定できます。すべての関連コンポーネントを一度に簡単にスタイル設定できます。 タイプを設定するには、IGX_input-group_TYPE インジェクション トークンを使用して DI プロバイダーを作成します。

providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]

Note

type プロパティは IGX_INPUT_GROUP_TYPE よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。 igniteui-angular フォーム コントロールのほとんどは、内部で input-group コンポーネントを使用するか、カスタム テンプレートを使用します。グローバル トークンの設定は、これらのコンポーネントにも影響します。

Ignite UI for Angular は、type="file" の入力スタイルも提供し、すべての入力グループ タイプとテーマをサポートします。以下をテンプレートに追加するだけです:

<igx-input-group>
    <input igxInput type="file" multiple />
</igx-input-group>

Input Group テーマ

入力グループ コンポーネントは、material、fluent、bootstrap、indigo-design などの複数のテーマをサポートします。theme は、コンポーネントの初期化中に自動的に設定され、現在使用されているスタイルシートから推測されます。

<igx-input-group theme="fluent">...</igx-input-group>

スタイル設定

入力グループのスタイル設定を開始するには、index ファイルをスタイルファイルに含めます。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

次に、igx-input-group-theme を拡張する新しいテーマを作成し、変更するパラメーターを渡します。

$custom-input-group: igx-input-group-theme(
  $filled-text-color: #288a54,
  $focused-text-color: #174f30,
  $idle-text-color: #288a54,
  $idle-bottom-line-color: #288a54,
  $interim-bottom-line-color: #288a54,
  $hover-bottom-line-color: #288a54,
  $focused-secondary-color: #174f30,
  $box-background: #eeeeee
);

CSS 変数の使用

最後に、新しく作成したテーマを含めます。

@include igx-css-vars($custom-input-group);

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、input group mixin を用いる必要があります。

ただし、先の手順に示すように、インクルード ステートメントをそのままにすると、スタイルは適切に適用されません。テキストの色が適切に変更された場合も、下の境界線と背景は同じままです。これは、コンポーネントが Emulated ViewEncapsulation を使用しているためです。input 要素と label 要素はビューの一部であるため、スタイルが正しく適用されます。下の境界線は igx-input-group コンポーネントによって生成され、コンポーネントのスタイルの影響を受けません。

境界線のスタイルを設定するには、:: ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターでスタイルのスコープを設定する必要があります。

:host {
    ::ng-deep {
        @include igx-input-group($custom-input-group);
    }
}

デモ

API リファレンス

• IgxInputDirective
• IgxHintDirective
• IgxInputGroup タイプ
• IgxInputGroupComponent
• IgxInputGroupComponent スタイル

テーマの依存関係

• IgxButton テーマ
• IgxIcon テーマ

その他のリソース

関連トピック:

• Label および Input
• リアクティブ フォームの統合

コミュニティに参加して新しいアイデアをご提案ください。

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