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 に関する詳細な情報は、以下のリンクのトピックを参照してください。

• IgxActionStripComponent API

以下の定義済み CSS スタイルを使用してアクション ストリップ レイアウトを構成しました。

• IgxActionStripComponent スタイル

アクション ストリップで使用できるその他のコンポーネントとディレクティブ。

• IgxGridActionsBaseDirective
• IgxGridPinningActionsComponent
• IgxGridEditingActionsComponent
• IgxDividerDirective

テーマの依存関係

• IgxButton テーマ
• IgxRipple テーマ
• IgxDropDown テーマ
• IgxIcon テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)