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 リファレンス
- IgxInputDirective
- IgxHintDirective
- IgxInputGroup タイプ
- IgxInputGroupComponent
- IgxInputGroupComponent スタイル
テーマの依存関係
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。