Input Group

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

    Angular Input Group の例

    使用方法

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

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

    // app.module.ts
    
    ...
    import { IgxInputGroupModule } from "igniteui-angular";
    import { FormsModule } from "@angular/forms";
    
    @NgModule({
        ...
        imports: [..., IgxInputGroupModule, FormsModule],
        ...
    })
    export class AppModule {}
    
    Note

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

    Label および Input

    igxLabeligxInput ディレクティブとその検証、データ バインディング、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 (タイプが指定されていない場合のデフォルト)、borderbox および search です。lineborder および 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 テーマ

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

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

    スタイル設定

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

    @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 リファレンス

    テーマの依存関係

    その他のリソース

    関連トピック:

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