【Blazor】 属性スプラッティングの使い方

早速ですが、属性スプラッティングを使用して、ボタンの属性を一括設定してみます。

    @* ボタンに属性スプラッティングを使用する例 *@

    @page "/attributebutton"

    <button @attributes="buttonAttributes">属性スプラッティング</button>

    @code {

        private IDictionary<string, object> buttonAttributes;

        protected override void OnInitialized()
        {
            // 属性スプラッティングを使用してボタンのスタイルを設定
            buttonAttributes = new Dictionary<string, object>
            {
                { "class", "btn btn-primary" },
                { "style", "font-size: 16px; font-weight: bold;" },
                { "onclick", EventCallback.Factory.Create(this, OnButtonClick) }
            };
        }

        private void OnButtonClick()
        {
            // ボタンがクリックされたときの処理
            // ここに適当な処理を記述
            Console.WriteLine("ボタンがクリックされた！");
        }

    }

button要素に@attributesを使用して、属性スプラッティングを行っています。 @attributesに渡す値は、IDictionary＜string, object＞型である必要があります。

buttonAttributesは、ボタンの属性と値のペアを格納しています。 このbuttonAttributesを渡すことで、class属性やstyle属性、onclick属性をまとめて設定することができます。

それでは実行してみましょう。 ボタンに属性が適用され、ボタンの見た目が変わっていることがわかります。

属性スプラッティングでは、非文字列型の属性値も扱うことができるようになっています。 例えば、disabled属性を動的に設定することが可能です。

@code {
    private Dictionary<string, object> buttonAttributes = new Dictionary<string, object>
    {
        { "class", "btn btn-primary" },
        { "disabled", true }
    };
}

<button @attributes="buttonAttributes">I am disabled</button>

属性スプラッティングで適用される属性は、明示的に定義された属性よりも優先度が低いです。

<button class="btn btn-primary" @attributes="buttonAttributes">属性スプラッティング</button>

@code {

    private Dictionary<string, object> buttonAttributes = new Dictionary<string, object>
    {
        { "class", "btn btn-secondary" }
    };

}

上の例では、buttonに明示的にbtn btn-primaryというclassが設定されているため、 buttonAttributesのbtn btn-secondaryは無視されてしまいます。

属性スプラッティングは便利ですが、こういった罠もあるので、気を付けましょう。

属性スプラッティングを使ったコンポーネントを作成することもできます。

    @* 属性スプラッティングを使用したコンポーネント *@

    <input placeholder="@PlaceHolder" @attributes=InputAttributes />

    @code {

        [Parameter]
        public string? PlaceHolder{ get; set; }

        /// <summary>
        /// 属性スプラッティングで受け取るパラメータ
        /// </summary>
        [Parameter(CaptureUnmatchedValues = true)]
        public Dictionary<string, object>? InputAttributes { get; set; }

    }

通常のパラメータ通り、Parameter属性を付与しますが、注意点が２つあります。

• Dictionary＜string,object＞の型にする
• [Parameter]にCaptureUnmatchedValues = trueを指定する

作成したコンポーネントをページ内での使用例を見ていきましょう。 以下は実際にコンポーネントを使用したコードになります。

    @* 属性スプラッティングのコンポーネントを使用したページ *@

    @page "/attributecomponent"

    <Blazor_AttributeSplatting.Components.AttributeSplattingComponent InputAttributes="Attributes" 
                                                                      PlaceHolder="何か入力してください。" />

    @code {

        private Dictionary<string, object> Attributes { get; set; } = new()
        {
            { "type","password" }
        };

    }

このページでは、コンポーネントの入力タイプをpasswordへ変更してみます。 使い方は、ボタンの例と同様に、Dictionary＜string,object＞の型でパラメータを渡すだけです。

それでは実行してみます。

入力部分がパスワードになっていることが確認できます。