Input Group

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

Angular Input Group の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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' }]

注: type プロパティは IGX_input-group_TYPE よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。
igniteui-angular フォーム コントロールのほとんどは、内部で 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 リファレンス

その他のリソース

関連トピック:

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