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

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

    Blazor Icon Button の例

    使用方法

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

    IgbIconButtonModule.Register(IgniteUIBlazor);
    

    IgbIconButton の使用を開始する最も簡単な方法は次のとおりです。

    <IgbIconButton IconName="thumb-up" Collection="material" />
    

    バリアント

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

    <IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />
    

    サイズ

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

    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />
    

    タイプ

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

    <IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />
    

    Mirrored (ミラー化済み)

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

    <IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />
    

    スタイル設定

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

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

    その他のリソース