Как можно случайно добавить атрибуты CSS в компонент Blazor из родительского слоя, как это сделал Vue? - PullRequest
Новая
       75

Как можно случайно добавить атрибуты CSS в компонент Blazor из родительского слоя, как это сделал Vue?

2 голосов
/ 05 июля 2019

Поскольку я хочу создать некоторые повторно используемые компоненты 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>

Это означает, что мне нужно объединить две частиАтрибуты CSS вместе, чтобы сделать окончательный HTML как: 

<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 непосредственно в мой базовый класс, я думаю, я мог бы достичь этого путем переопределения метода BuildRenderTree из ComponentBase clss: 

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

Но, к сожалению, я попробовал все свои способыстроить вручную, но понятия не имею, чтобы сделать это.Я не знаю, как получить элементы моего HTML (например, «div») и добавить к нему дополнительные атрибуты CSS.

Все это связано с выполнением функции, поскольку Vue может легкоделать.В коде Vue мы, безусловно, можем добавить любой атрибут к компоненту и передать его первому элементу в компоненте.

Может ли кто-нибудь помочь мне в достижении этой цели или дать какое-то предложение?Большое спасибо.

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

Я думаю, что ваш подход хорош, ему просто нужна небольшая абстракция, чтобы сделать его читаемым и легко управляемым между несколькими компонентами.

Вот почему я создал эту простую библиотеку вспомогательных функций.Это именно то, что вы делаете в своем коде, но предлагает API для согласованности.

https://www.nuget.org/packages/BlazorComponentUtilities/

1 голос
/ 05 июля 2019

Насколько я знаю, сейчас Blazor не предлагает встроенного способа обработки CSS, а лучшие практики и шаблоны Blazor еще не доступны, поэтому вы можете обрабатывать CSS любым удобным для вас способом, включая JSInterop. .

Ниже приведена ссылка на библиотеку, которая, по моему мнению, может быть очень полезна для вас: https://github.com/chanan/BlazorStyled

Надеюсь, это поможет ...

...