Angular Action Strip (アクション ストリップ) ディレクティブの概要

Ignite UI for Angular Action Strip コンポーネントは、ホバーなどのユーザー操作の際に特定のターゲット コンテナーの上に追加の UI および機能を表示できる 1 つ以上のアクションを含むオーバーレイ領域を提供します。アクション ストリップはコンテナーをオーバーレイしようとして絶対的に配置されるため、コンテナーは相対的に配置する必要があります。主な操作とターゲットコ ンテナーへのユーザー アクセスはアクション ストリップでオーバーラップされますが、使用できます。

Angular Action Strip の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxIconModule
 } from "igniteui-angular";
import { ActionStripParagraphComponent } from "./action-strip-paragraph/action-strip-paragraph.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ActionStripParagraphComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { DisplayDensity } from 'igniteui-angular';

@Component({
  selector: 'app-action-strip-paragraph',
  styleUrls: ['./action-strip-paragraph.component.scss'],
  templateUrl: './action-strip-paragraph.component.html'
})
export class ActionStripParagraphComponent {
    @ViewChild('myParagraph') public paragraph;
    public result: string;
    public isVisible = false;
    public isBold = false;
    public isItalic = false;
    public isUnderlined = false;
    public displayDensity = DisplayDensity.comfortable;

    public makeTextBold() {
        if (!this.isBold) {
            this.paragraph.nativeElement.classList.add('font-bold');
            this.isBold = true;
        } else {
            this.paragraph.nativeElement.classList.remove('font-bold');
            this.isBold = false;
        }
    }

    public makeTextItalic() {
        if (!this.isItalic) {
            this.paragraph.nativeElement.classList.add('font-italic');
            this.isItalic = true;
        } else {
            this.paragraph.nativeElement.classList.remove('font-italic');
            this.isItalic = false;
        }
    }

    public makeTextUnderlined() {
        if (!this.isUnderlined) {
            this.paragraph.nativeElement.classList.add('font-underlined');
            this.isUnderlined = true;
        } else {
            this.paragraph.nativeElement.classList.remove('font-underlined');
            this.isUnderlined = false;
        }
    }
}
tsコピー

<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()">
    <p #myParagraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
        Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
        molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
        malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
        vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
        mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
        interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
        mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
        vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
    </p>
    <igx-action-strip #actionStrip [displayDensity]="displayDensity" class="my-action-strip" [hidden]="true">
        <igx-buttongroup [multiSelection]="true" class="buttons">
            <button igxButton (click)="makeTextBold()">
                <igx-icon>format_bold</igx-icon>
            </button>
            <button igxButton (click)="makeTextItalic()">
                <igx-icon>format_italic</igx-icon>
            </button>
            <button igxButton (click)="makeTextUnderlined()">
                <igx-icon>format_underlined</igx-icon>
            </button>
        </igx-buttongroup>
    </igx-action-strip>
</div>
htmlコピー

@use '../../variables' as *;

$custom-strip: action-strip-theme(
    $actions-border-radius: 0
);

.my-action-strip {
    @include action-strip($custom-strip);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
}

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding: 1rem;
    margin: auto;
    min-width: 700px;
    max-width: 1000px;
    height: 350px;
    position: relative;
}

.font-italic {
    font-style: italic;
}

.font-bold {
    font-weight: bold
}

.font-underlined {
    text-decoration: underline
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Action Strip を使用した作業の開始

Ignite UI for Angular Action Strip コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxActionStripModule をインポートします。

// app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})
export class AppModule {}
typescript

あるいは、16.0.0 以降、IgxActionStripComponent をスタンドアロンの依存関係としてインポートすることも、IGX_ACTION_STRIP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

...
import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular';
// import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <div style="width:100px; height:100px;">
        <igx-action-strip>
            <button igxButton (click)="makeTextBold()">
                <igx-icon>format_bold</igx-icon>
            </button>
        </igx-action-strip>
    <div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent]
    /* or imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] */
})
export class HomeComponent {}
typescript

Ignite UI for Angular Action Strip モジュールまたはディレクティブをインポートしたので、igx-action-strip コンポーネントの基本構成を開始できます。

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>
html

デフォルトでアクション ストリップは表示されますが、これは 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>
html

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonModule,
	IgxIconModule
 } from "igniteui-angular";
import { ActionStripParagraphMenuComponent } from "./action-strip-paragraph-menu/action-strip-paragraph-menu.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ActionStripParagraphMenuComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { DisplayDensity, IgxActionStripComponent } from 'igniteui-angular';

@Component({
  selector: 'app-action-strip-paragraph-menu',
  styleUrls: ['./action-strip-paragraph-menu.component.scss'],
  templateUrl: './action-strip-paragraph-menu.component.html'
})
export class ActionStripParagraphMenuComponent {
    @ViewChild('actionStrip') public actionStrip: IgxActionStripComponent;
    @ViewChild('myParagraph') public paragraph;
    public result: string;
    public isVisible = false;
    public textLeft = false;
    public textCenter = false;
    public textRight = false;
    public displayDensity = DisplayDensity.comfortable;

    public onMouseLeave(event?) {
        if (!event) {
            return;
        }
        if (event.relatedTarget &&
            event.relatedTarget.nodeName.toLowerCase() !== 'igx-drop-down-item' &&
            event.relatedTarget.className.indexOf('menu-button') === -1) {
            this.actionStrip.hide();
        }
    }

    public alignTextLeft() {
        this.paragraph.nativeElement.classList.add('text-align-left');
        this.paragraph.nativeElement.classList.remove('text-align-center');
        this.paragraph.nativeElement.classList.remove('text-align-right');
    }

    public alignTextCenter() {
        this.paragraph.nativeElement.classList.remove('text-align-left');
        this.paragraph.nativeElement.classList.add('text-align-center');
        this.paragraph.nativeElement.classList.remove('text-align-right');
    }

    public alignTextRight() {
        this.paragraph.nativeElement.classList.remove('text-align-left');
        this.paragraph.nativeElement.classList.remove('text-align-center');
        this.paragraph.nativeElement.classList.add('text-align-right');
    }
}
tsコピー

<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="onMouseLeave($event)">
    <p #myParagraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
        Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
        molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
        malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
        vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
        mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
        interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
        mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
        vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
    </p>
    <igx-action-strip [displayDensity]="displayDensity" class="my-action-strip" #actionStrip [hidden]="true">
        <div *igxActionStripMenuItem class="menu-button" (click)="alignTextLeft()" igxRipple>
            <igx-icon>format_align_left</igx-icon>
            <span>Left</span>
        </div>
        <div *igxActionStripMenuItem class="menu-button" (click)="alignTextCenter()" igxRipple>
            <igx-icon>format_align_center</igx-icon>
            <span>Center</span>
        </div>
        <div *igxActionStripMenuItem class="menu-button" (click)="alignTextRight()" igxRipple>
            <igx-icon>format_align_right</igx-icon>
            <span>Right</span>
        </div>
    </igx-action-strip>
</div>
htmlコピー

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: auto;
    min-width: 700px;
    max-width: 1000px;
    height: 350px;
    position: relative;
}

.my-action-strip {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
}

.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.menu-button {
    display: flex;

    igx-icon + span {
        margin-inline-start: 16px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

アクション ストリップの再利用

同じアクション ストリップ インスタンスは、アクションを同時に表示する必要がない限り、ドキュメント内の複数の場所で使用できます。 アクション ストリップは 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>
html

これらのコンポーネントは IgxGridActionsBaseDirective を継承します。カスタム グリッド アクション コンポーネントを作成する場合、IgxGridActionsBaseDirective も継承する必要があります。

IgxActionStripComponent がグリッドの子コンポーネントである場合、行をホバーするとUI が自動的に表示されます。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { GridActionStripSampleComponent } from "./grid/grid-action-strip/grid-action-strip-sample";
import { 
	IgxGridModule,
	IgxDialogModule,
	IgxButtonModule,
	IgxFocusModule,
	IgxActionStripModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridActionStripSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxDialogModule,
	IgxButtonModule,
	IgxActionStripModule,
	IgxFocusModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxGridComponent, RowType, Transaction } from 'igniteui-angular';
import { DATA } from '../../data/nwindData';

@Component({
    selector: 'app-grid-row-action-strip',
    styleUrls: [`grid-action-strip-sample.scss`],
    templateUrl: 'grid-action-strip-sample.html'
})
export class GridActionStripSampleComponent {
    @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;

    public data: any[];
    public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();

    constructor() {
        this.data = DATA;
    }

    public isDirty(rowContext: RowType) {
        const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
        return rowContext && (rowContext.deleted || isRowEdited);
    }

    public isDeleted(rowContext: RowType) {
        return rowContext && rowContext.deleted;
    }

    public inEditMode(rowContext: RowType) {
        return rowContext && rowContext.inEditMode;
    }

    public startEdit(rowContext: RowType): void {
        const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
        const grid = rowContext.grid;

        if (grid.rowList.filter(r => r === rowContext).length !== 0) {
            grid.gridAPI.crudService.enterEditMode(firstEditable);
            firstEditable.activate(null);
        }
    }

    public commit(rowContext: RowType) {
        this.grid.transactions.commit(this.grid.data, rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, []);
    }

    public redo(rowContext: RowType) {
        const rowID = rowContext.key;
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID);
        lastDiscarded.forEach((transaction) => {
            const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id);
            this.grid.transactions.add(transaction, recRef);
        });
        this.discardedTransactionsPerRecord.set(rowID, []);
    }

    public hasDiscardedTransactions(rowContext: RowType) {
        if (!rowContext) { return false; }
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key);
        return lastDiscarded && lastDiscarded.length > 0;
    }

    public undo(rowContext: RowType) {
        const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true)
        .filter(x => x.id === rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard);
        this.grid.transactions.clear(rowContext.key);
    }
}
tsコピー

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [primaryKey]="'ProductID'" width="100%"
        height="500px" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
        <igx-column field="ProductID" header="Product ID" [pinned]="true" [hidden]='true' [filterable]="false">
        </igx-column>
        <igx-column field="ProductName" header="Product Name" dataType="string" [sortable]="true"></igx-column>
        <igx-column field="UnitPrice" header="Unit Price" dataType="currency" [sortable]="true"></igx-column>
        <igx-column field="UnitsOnOrder" header="Units On Order" dataType="number" [editable]="false"
            [filterable]="false"></igx-column>
        <igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true"></igx-column>
        <igx-column field="QuantityPerUnit" header="Quantity Per Unit" dataType="string" [filterable]="false">
        </igx-column>
        <igx-column field="ReorderLevel" header="Reorder Level" dataType="number" [filterable]="false"></igx-column>
        <igx-column field="Discontinued" header="Discontinued" dataType="boolean" [filterable]="false">
        </igx-column>
        <igx-action-strip #actionstrip>
            <igx-grid-pinning-actions></igx-grid-pinning-actions>
            <ng-container *ngIf="!inEditMode(actionstrip.context)">
                <button title="Edit" igxButton="icon" igxRipple
                    (click)='startEdit(actionstrip.context)'>
                    <igx-icon>edit</igx-icon>
                </button>
                <button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
                    (click)='undo(actionstrip.context)'>
                    <igx-icon>undo</igx-icon>
                </button>
                <button title="Redo All" igxButton="icon" igxRipple
                    *ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
                    (click)='redo(actionstrip.context)'>
                    <igx-icon>redo</igx-icon>
                </button>
                <button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
                    (click)='commit(actionstrip.context)'>
                    <igx-icon>save</igx-icon>
                </button>
                <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
                    (click)='actionstrip.context.delete()'>
                    <igx-icon>delete</igx-icon>
                </button>
            </ng-container>
        </igx-action-strip>
    </igx-grid>
</div>
htmlコピー

.grid__wrapper {
    margin: 15px;
}
scssコピー

Edit in: CodesandboxStackBlitz

グリッド コンポーネントで ActionStrip を使用する方法の詳細については、こちらを参照してください。

スタイル設定

アクション ストリップをカスタマイズするには、すべてのスタイリング関数とミックスインが置かれている index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

次に、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,
);
scss

最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonModule,
	IgxIconModule
 } from "igniteui-angular";
import { ActionStripStylingComponent } from "./action-strip-paragraph-styling/action-strip-paragraph-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ActionStripStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxActionStripModule,
	IgxRippleModule,
	IgxButtonModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { DisplayDensity, IgxActionStripComponent } from 'igniteui-angular';

@Component({
  selector: 'app-action-strip-paragraph-styling',
  styleUrls: ['./action-strip-paragraph-styling.component.scss'],
  templateUrl: './action-strip-paragraph-styling.component.html'
})
export class ActionStripStylingComponent {
    @ViewChild('actionstrip') public actionStrip: IgxActionStripComponent;
    @ViewChild('myParagraph') public paragraph;
    public result: string;
    public isVisible = false;
    public textLeft = false;
    public textCenter = false;
    public textRight = false;
    public displayDensity = DisplayDensity.comfortable;

    public textDelete() {
        this.paragraph.nativeElement.classList.add('text-strike-through');
    }

    public textRestore() {
        this.paragraph.nativeElement.classList.remove('text-strike-through');
    }

    public showActions() {
        this.isVisible = true;
    }

    public hideActions() {
        this.isVisible = false;
    }
}
tsコピー

<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()">
    <p #myParagraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue.
        Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
        molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id,
        malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
        vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at
        mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
        interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo
        mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam
        vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
    </p>
    <igx-action-strip [displayDensity]="displayDensity" class="my-action-strip" #actionStrip [hidden]="true">
        <button igxButton (click)="textRestore()">
            <igx-icon>restore</igx-icon>
        </button>
        <button igxButton (click)="textDelete()">
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</div>
htmlコピー

@use '../../variables' as *;

:host ::ng-deep {
    .igx-action-strip__actions {
        display: flex;
        flex-direction: column;
        max-height: 72px;
    }
}

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: auto;
    min-width: 700px;
    max-width: 1000px;
    position: relative;
}

.text-strike-through {
    text-decoration: line-through;
}

$custom-strip: action-strip-theme(
    $background: rgba(150, 133, 143, 0.7),
    $actions-background: rgba(109, 121, 147, 0.9),
    $icon-color:  null,
    $delete-action: null,
    $actions-border-radius: 0
);

.my-action-strip {
    @include css-vars($custom-strip);

    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: flex-end;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

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

• IgxActionStripComponent API

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

• IgxActionStripComponent スタイル

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

• IgxGridActionsBaseDirective
• IgxGridPinningActionsComponent
• IgxGridEditingActionsComponent
• IgxDividerDirective

テーマの依存関係

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

その他のリソース

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

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