Blazor Button (ボタン) の概要

    Blazor Button コンポーネントを使用すると、Blazor アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、Blazor Button OnClick イベント、Blazor ボタンの切り替え、Blazor ボタンの無効化などを通じて柔軟性を提供します。

    Blazor Button の例

    使用方法

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

    IgbButtonModule.Register(IgniteUIBlazor);
    

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

    <IgbButton />
    

    Prefix / Suffix

    IgbButton コンポーネントの prefix スロットと suffix スロットを使用すると、ボタンのメイン コンテンツの前後に異なるコンテンツを追加できます。

    <IgbButton Variant="@ButtonVariant.Contained">
        <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
    </IgbButton>
    

    タイプ

    Href 属性が設定されている場合、ボタン コンポーネントはその内部構造を <button> から <a> タイプの要素に変更します。その場合、ボタンは通常のリンクと考えることができます。Href 属性を設定すると、RelTarget および Download 属性も設定できます。 ボタン コンポーネントが実際の <button> 要素を内部で使用する場合、プロパティを次のいずれかの値に設定することで、その DisplayType を指定できます。

    • submit -フォーム データを送信する場合
    • reset - フォーム データを初期値にリセットする場合
    • button - ウェブページのどこかにカスタム機能を備えたボタンを追加する場合

    Button のバリアント

    Contained ボタン

    variant を使用して、コンポーネント テンプレートにシンプルなフラット ボタンを追加します。バリアントを設定しない場合、デフォルトではフラットに設定されることに注意してください。

    <IgbButton Variant="@ButtonVariant.Contained" />
    

    Outlined ボタン

    outlined ボタンを作成するために必要なのは、variant プロパティの値を変更することだけです。

    <IgbButton Variant="@ButtonVariant.Outlined" />
    

    Flat ボタン

    同様に、flat バリアントに切り替えることができます。

    <IgbButton Variant="@ButtonVariant.Flat" />
    

    Floating Action ボタン

    variant プロパティを fab に設定することで、フローティング アクション ボタンを作成できます。

    <IgbButton Variant="@ButtonVariant.Fab" />
    

    ボタンのサイズ設定

    size プロパティを使用して、ユーザーが button のサイズを選択できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびにボタンの size プロパティを変更します。

    <IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
        <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
        <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
        <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
    </IgbRadioGroup>
    
    @code {
        private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;
    
        protected override void OnInitialized()
        {
            IgbButtonModule.Register(IgniteUIBlazor);
            IgbRadioModule.Register(IgniteUIBlazor);
            IgbRadioGroupModule.Register(IgniteUIBlazor);
        }
    
        public void OnSmallClick(EventArgs e)
        {
            SizableComponentSize = SizableComponentSize.Small;
        }
    
        public void OnMediumClick(EventArgs e)
        {
            SizableComponentSize = SizableComponentSize.Medium;
        }
    
        public void OnLargeClick(EventArgs e)
        {
            SizableComponentSize = SizableComponentSize.Large;
        }
    }
    

    上記のコードを実装した結果は、次のようになります:

    ダウンロード

    download プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。

    <IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="@ButtonBaseTarget._blank">
        Download
    </IgbButton>
    

    スタイル設定

    ボタン コンポーネントは、ラッピング要素 (<button> または <a>) のスタイルを設定できる base CSS パーツを公開します。

    igc-button::part(base) {
        background-color: #e99221;
        color: #011627;
        padding: 18px;
    }
    

    その他のリソース