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-supportfalse (デフォルト) に設定されている場合、css 変数を以下のように含めます。

    @include css-vars($custom-strip);
    

    $legacy-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

    @include action-strip($custom-strip);
    

    既知の問題と制限

    • IE11 で Action Strip コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。

      import 'core-js/es7/array';
      

    API と スタイル リファレンス

    アクション ストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください。

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

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

    テーマの依存関係

    その他のリソース

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