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';

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

    $custom-input-group: 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 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 input-group($custom-input-group);
    }
}

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

    関連トピック:

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