Button

    Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。

    Angular Button の例

    使用方法

    Button ディレクティブは NgModule としてエクスポートされるため、アプリケーションで AppModuleIgxButtonModule をインポートする必要があります。

    // app.module.ts
    
    import { IgxButtonModule } from 'igniteui-angular';
    
    @NgModule({
        imports: [
            ...
            IgxButtonModule,
            ...
        ]
    })
    export class AppModule {}
    

    ボタン タイプ

    Flat ボタン

    igxButton ディレクティブを使用して、シンプルなフラット ボタンをコンポーネント テンプレートに追加します。タイプを選択しない場合、デフォルト値は flat です。

    <button igxButton="flat">Flat</button>
    

    Raised ボタン

    エンボス加工されたボタンを作成するには、igxButton プロパティの値を変更するだけです。

    <button igxButton="raised">Raised</button>
    

    Outlined ボタン

    同様に、アウトライン タイプに切り替えることができます。

    <button igxButton="outlined">Outlined</button>
    

    Icon ボタン

    アイコンをボタンとして使用することもできます。

    <button igxButton="icon">
      <igx-icon fontSet="material">favorite</igx-icon>
    </button>
    

    フローティング アクション ボタン

    アイコンを使用して、フローティング アクション ボタンを作成します。

    <button igxButton="fab">
      <igx-icon fontSet="material">edit</igx-icon>
    </button>
    

    拡張 FAB を作成するには、igx-icon の前に任意の要素を追加できます。

    <button class="btn" igxButton="fab">
        <span>like</span>
        <igx-icon fontSet="material">favorite</igx-icon>
    </button>
    
    Note

    拡張 FAB テキストを適切にスタイルするには、<span><div> または <p> タグを使用します。

    ボタンの無効化

    ボタンを無効にするには、disabled プロパティを使用します。

    <button igxButton="raised" [disabled]="'true'">Disabled</button>
    

    Ripple

    igxRipple ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。

    <button igxButton="raised" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
        Ripple
    </button>
    

    Span

    Spandiv などの要素を Ignite UI for Angular スタイルのボタンに変更するために igxButton ディレクティブを使用できます。デフォルトの色は igxButtonColorigxButtonBackground プロパティでカスタマイズできます。

    <span igxButton="raised" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
        Span
    </span>
    

    密度の表示

    displayDensity 入力を使用して igxButton の表示密度を選択できます。これを行うには、まず IgxButtonGroupModule をインポートし、igxButtonGroup コンポーネントによってすべての密度値を表示する必要があります。これにより、選択されるたびにボタンの displayDensity にバインドされた独自の density プロパティが更新されます。

    Note

    icon タイプのボタンは、異なる表示密度値を設定しても視覚的に変化しません。

    // app.module.ts
    ...
    import { IgxButtonGroupModule } from 'igniteui-angular';
    
    @NgModule({
        imports: [
            ...
            IgxButtonGroupModule
            ...
        ]
    })
    
    <!--buttons-density.component.html-->
    
    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
    ...
    <button igxButton="flat" [displayDensity]="density">Flat</button>
    
    // buttons-density.component.ts
    public density = "comfortable";
    public displayDensities;
    
    public ngOnInit() {
        this.displayDensities = [
            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
            { label: 'compact', selected: this.density === 'compact', togglable: true }
        ];
    }
    
    public selectDensity(event) {
        this.density = this.displayDensities[event.index].label;
    }
    

    以下は結果です。

    スタイル設定

    ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

    次に、igx-button-theme を拡張し、それぞれのホバーとフォーカス パラメーターと共に $foreground$background パラメーターを受け入れる新しいテーマを作成します。

    $custom-button-theme: igx-button-theme(
        $foreground: #fdfdfd,
        $hover-foreground: #fdfdfd,
        $focus-foreground: #fdfdfd,
        $background: #345779,
        $hover-background: #2e4d6b,
        $focus-background: #2e4d6b,
        $disabled-foreground: #2e4d6b
    );
    

    ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、igx-button-theme セクションを参照してください。

    CSS 変数の使用

    最後には、カスタム ボタン テーマをアプリケーションに渡します。

     @include igx-css-vars($custom-button-theme);
    

    テーマ オーバーライドの使用

    Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

    :host {
         ::ng-deep {
            @include igx-button($custom-button-theme);
        }
    }
    

    デモ

    API リファレンス

    その他のリソース

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