Action Strip
Ignite UI for Angular Action Strip コンポーネントは、ホバーなどのユーザー操作の際に特定のターゲット コンテナーの上に追加の UI および機能を表示できる 1 つ以上のアクションを含むオーバーレイ領域を提供します。アクション ストリップはコンテナーをオーバーレイしようとして絶対的に配置されるため、コンテナーは相対的に配置する必要があります。主な操作とターゲットコ ンテナーへのユーザー アクセスはアクション ストリップでオーバーラップされますが、使用できます。
Angular Action Strip の例
使用方法
アクション ストリップを初期化して正しく配置するには、相対的に配置されたコンテナー内に配置する必要があります。
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button igxButton (click)="makeTextBold()">
<igx-icon>format_bold</igx-icon>
</button>
</igx-action-strip>
<div>
デフォルトでアクション ストリップは表示されますが、これは hidden
の @Input プロパティで設定できます。
メニューのルック アンド フィール
3 つ以上のアクション項目が表示される場合に、IgxActionStripMenuItem
ディレクティブの使用をお勧めします。*igxActionStripMenuItem
構造ディレクティブでマークされたアクション ストリップ内の項目はドロップダウンで表示され、[その他]
ボタン (最後のアクションを表す 3 つのドット) を切り替えると表示されます。
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button *igxActionStripMenuItem igxButton (click)="alignTextLeft()">
<igx-icon>format_align_left</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextCenter()">
<igx-icon>format_align_center</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextRight()">
<igx-icon>format_align_right</igx-icon>
</button>
</igx-action-strip>
</div>
アクション ストリップの再利用
同じアクション ストリップ インスタンスは、アクションを同時に表示する必要がない限り、ドキュメント内の複数の場所で使用できます。
アクション ストリップは context
によって親コンテナーを変更できます。
show
API メソッドを使用し、context
を引数として渡すことを推奨します。context
はコンポーネントのインスタンスで、ElementRef
型のアクセス可能な element
プロパティを持つ必要があります。
注: アクション ストリップを
element
に追加するために、show
API メソッドは Angular Renderer2 を使用します。
グリッドでの使用
アクション ストリップは、IgxGrid の追加機能と UI を提供します。 これはグリッド アクション コンポーネントで利用でき、2 つのデフォルト コンポーネントを提供します。
IgxGridEditingActionsComponent
- グリッド編集に関連する機能と UI を含みます。グリッドのrowEditable
オプションの値と行の削除が許可されているかどうかに基づいて、セルまたは行の編集モードをすばやく切り替えることができます。IgxGridPinningActionsComponent
- グリッドの行ピン固定に関連する機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。
<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
<igx-column *ngFor="let c of columns" [field]="c.field">
</igx-column>
<igx-action-strip #actionStrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>
</igx-grid>
注: これらのコンポーネントは
IgxGridActionsBaseDirective
を継承します。カスタム グリッド アクション コンポーネントを作成する場合、IgxGridActionsBaseDirective
も継承する必要があります。
注:
IgxActionStripComponent
がグリッドの子コンポーネントである場合、行をホバーするとUI が自動的に表示されます。
注:グリッド コンポーネントで ActionStrip を使用する方法の詳細については、こちらを参照してください。
スタイル設定
アクション ストリップをカスタマイズするには、すべてのスタイリング関数とミックスインが置かれている index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
次に、action-strip-theme
を拡張する新しいテーマを作成し、変更するパラメーターを渡します。
$custom-strip: action-strip-theme(
$background: rgba(150, 133, 143, 0.4),
$actions-background: rgba(109, 121, 147, 0.6),
$icon-color: null,
$delete-action: null,
$actions-border-radius: 0
);
最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。
$legacy-support
が false
(デフォルト) に設定されている場合、css 変数を以下のように含めます。
@include css-vars($custom-strip);
$legacy-support
が true
に設定されている場合、コンポーネントのテーマを以下のように含めます。
@include action-strip($custom-strip);
既知の問題と制限
IE11 で Action Strip コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。
import 'core-js/es7/array';
API と スタイル リファレンス
アクション ストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください。
以下の定義済み CSS スタイルを使用してアクション ストリップ レイアウトを構成しました。
アクション ストリップで使用できるその他のコンポーネントとディレクティブ。
IgxGridActionsBaseDirective
IgxGridPinningActionsComponent
IgxGridEditingActionsComponent
IgxDividerDirective