web-dev-qa-db-fra.com

Comment puis-je ajouter au hasard des attributs CSS au composant Blazor à partir de la couche parent comme Vue l'a fait?

Puisque je veux concevoir des composants Blazor réutilisables, j'espère qu'ils pourraient avoir une fonctionnalité comme celle-ci:

Supposons que j'ai un composant personnalisé "MyComponent", je pourrais y ajouter n'importe quel attribut CSS lorsque je l'utilise:

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

Dans MyComponent, je corrige généralement certains attributs CSS courants sur le wapper supérieur, comme ceci:

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

Cela signifie que je dois combiner deux parties des attributs CSS pour créer le HTML final comme:

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

Donc je suppose que je devrais avoir ce motif:

<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}";
        }
    }
}

Pour réduire le code redondant, je pourrais créer une classe de base qui a une propriété Class protégée et chaque composant inhérent à celle-ci, mais je ne peux toujours pas éviter d'écrire le même code de combinaison dans chacune. J'espère qu'il existe une solution pour ajouter ces CSS personnalisés directement dans ma classe de base, je suppose que je pourrais y parvenir en remplaçant la méthode BuildRenderTree de ComponentBase clss:

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

Mais malheureusement, j'ai essayé toutes mes façons de construire manuellement, mais je n'ai aucune idée de le faire. Je ne sais pas comment obtenir des éléments de mon HTML ("div" par exemple) et y ajouter des attributs CSS supplémentaires.

Tout cela consiste à faire une fonctionnalité comme Vue pourrait facilement le faire. Dans le code Vue, nous pourrions certainement ajouter n'importe quel attribut à un composant et les transmettre au premier élément du composant.

Quelqu'un pourrait-il m'aider à atteindre cet objectif ou me faire une suggestion? Merci beaucoup.

c#asp.net-corerazorblazor
5
SillyJumper

Pour autant que je sache, pour le moment, Blazor n'offre pas de méthode intégrée pour gérer les CSS, et les meilleures pratiques et modèles de Blazor ne sont pas encore disponibles, vous pouvez donc gérer les CSS de la manière qui vous convient, y compris JSInterop.

Vous trouverez ci-dessous un lien vers une bibliothèque qui, je pense, peut vous être très utile: https://github.com/chanan/BlazorStyled

J'espère que cela t'aides...

1
enet

essayez ceci, je l'ai utilisé et cela fonctionne et est simple

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

Je ne sais pas si c'est une mauvaise pratique,

Cela empêche itellisense de fonctionner correctement dans l'attribut class,
mais c'est facilement réalisable il suffit de l'ajouter en dernier et à la fin de l'attribut
si vous devez apporter des modifications avec intellisense, ajoutez un "" avant la @ (classe), apportez vos modifications, puis supprimez le ""

il peut laisser un espace dans la chaîne de classe si le paramètre Class n'est pas défini sur le composant
par exemple <div class="fixed-css1 fixed-css2 "> (espace à la fin)

0
Scott