web-dev-qa-db-ja.com

Vueのように、CSS属性を親レイヤーからBlazorコンポーネントにランダムに追加するにはどうすればよいですか？

私はいくつかの再利用可能なBlazorコンポーネントを設計したいので、これらが次のような機能を持つことを望みます。

カスタムコンポーネント "MyComponent"があるとすると、それを使用しているときに、CSS属性を追加できます。

<MyComponent Class="custom-css1 custom-css2">
    some child content...
</MyComponent>

MyComponentにいる間、私は通常、次のようにいくつかの一般的なCSS属性を上部のワッパーに修正します。

<div class="fixed-css1 fixed-css2">
    some child content...
</div>

つまり、次のような最終的なHTMLを作成するには、CSS属性の2つの部分を組み合わせる必要があります。

<div class="fixed-css1 fixed-css2 custom-css1 custom-css2">
    some child content...
</div>

だから私はこのパターンが必要だと思います：

<div class="@Classes">
    some child content...
</div>

@functions
{

    [Parameter]
    private string Class { get; set; } = "";

    private string fixedClass = "fixed-css1 fixed-css2";

    private string Classes
    {
        get
        {
            return $"{fixedClass} {Class}";
        }
    }
}

冗長なコードを減らすために、保護されたClassプロパティとそれに固有のすべてのコンポーネントを持つ基本クラスを作成できますが、それぞれに同じ結合コードを書くことを避けられません。これらのカスタムCSSを基本クラスに直接追加するための解決策があることを願っています。ComponentBaseclssからBuildRenderTreeメソッドをオーバーライドすることでこれを実現できると思います。

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
        }

しかし残念ながら、私は手動でビルドするためにすべての方法を試しましたが、それを成し遂げることを考えていません。 HTMLの要素（ "div"など）を取得して、CSS属性を追加する方法がわかりません。

これらはすべてVueが簡単に実行できる機能の実行に関するものです。 Vueコードでは、コンポーネントに任意の属性を追加して、コンポーネントの最初の要素にそれらを渡すことができます。

誰かが私がこの目標を達成するのを手伝ったり、私にいくつかの提案をしたりできますか？どうもありがとうございました。

c#asp.net-corerazorblazor
5
SillyJumper

私の知る限り、現時点では、BlazorにはCSSを処理する組み込みの方法がなく、Blazorのベストプラクティスとパターンはまだ利用できないため、JSInteropを含め、CSSを適切な方法で処理できます。

以下は、あなたにとって非常に役立つと思われるライブラリへのリンクです。 https://github.com/chanan/BlazorStyled

お役に立てれば...

1
enet

これを試してください、私はそれを使用しました、そしてそれは機能し、簡単です

<div class="fixed-css1 fixed-css2 @(Class)">
    some child content...
</div>

これが悪い習慣かどうかはわかりませんが、

Itellisenseがclass属性で正しく機能しないようにします。
しかし、それは簡単に実行可能です。属性の最後と最後に追加するだけです
インテリセンスで変更を加える必要がある場合は、@（クラス）の前に「」を追加し、変更を加えてから「」を削除します

コンポーネントにClassパラメータが設定されていない場合、クラス文字列にスペースが残る場合があります
例<div class="fixed-css1 fixed-css2 ">（末尾にスペース）

0
Scott