Web Components Icon Button (アイコン ボタン) の概要

    Ignite UI for Web Components Icon Button コンポーネントを使用すると、開発者は登録済みのアイコンをアプリケーションのボタンとして使用できます。アイコン コンポーネントのすべての機能を備えていますが、ボタン コンポーネントの機能も追加しています。

    Web Components Icon Button の例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

    npm install igniteui-webcomponents
    

    IgcIconButtonComponent を使用する前に、次のように登録する必要があります:

    import { defineComponents, IgcIconButtonComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcIconButtonComponent);
    
    <igc-icon-button name="thumb-up" collection="material"></igc-icon-button>
    

    バリアント

    通常のボタン コンポーネントと同様に、アイコン ボタンはいくつかのバリアントをサポートします - flat (デフォルト)、contained、および outlined。アイコン ボタンのタイプを変更するには、アイコン ボタンの variant 属性を設定します。

    <igc-icon-button name="search" variant="contained"></igc-icon-button>
    

    サイズ

    ボタンのサイズは、size 属性をサポートされている 3 つのサイズ - smallmediumlarge (デフォルト) - のいずれかに設定することで変更できます。

    <igc-icon-button name="thumb-up" size="medium"></igc-icon-button>
    

    タイプ

    href 属性が設定されると、アイコン ボタン コンポーネントはその内部構造を <button> から <a> タイプ要素に変更します。その場合、アイコン ボタンは通常のリンクと考えることができます。href 属性を設定すると、アイコン ボタンの reltarget、および download 属性も設定できます。

    <igc-icon-button
      name="thumb-up"
      collection="material"
      href="https://duckduckgo.com"
      target="_blank">
    </igc-icon-button>
    

    Mirrored (ミラー化済み)

    一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコン ボタンを水平方向に反転させる mirrored 属性を提供します。

    <igc-icon-button name="thumb-up" mirrored></igc-icon-button>
    

    スタイル設定

    アイコン ボタン コンポーネントは、2 つの CSS パーツを公開します。ラッピング要素 (<button> または <a>) とラップされた <igc-icon> 要素のスタイルを設定できる baseicon です。

    igc-icon-button::part(base) {
      padding: 12px;
      color: olive;
    }
    
    igc-icon-button::part(icon) {
      --size: 32px;
    }
    

    API リファレンス

    その他のリソース

    API メンバー