Laden...

wie gebe ich Renderfragment, style von außerhalb mit?

Letzter Beitrag vor 9 Monaten 3 Posts 481 Views
wie gebe ich Renderfragment, style von außerhalb mit?

Guten Morgen, ich habe eine Vorlage für Bootstrap Cards geschaffen. Nun wäre meine frage, wie kann ich von den einzelnen Cards dieser Vorlage Styles mitgeben. z.b. wie breit die Card sein soll. denn wenn ich Styles mitgeben will kommt dieser Fehler: ... does not have a property matching the name 'style'.

public abstract class CardBase<TViewModel> : BaseComponent<TViewModel> where TViewModel : ICardViewModel
{
    [Inject]
    public required ICardService CardService { get; set; }
    [Parameter]
    public required RenderFragment<TViewModel> HeaderContent { get; set; }
    [Parameter]
    public required RenderFragment<TViewModel> BodyContent { get; set; }
    [Parameter]
    public RenderFragment<TViewModel>? FooterContent { get; set; }

    private CardDefinition? _cardDefinition;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _cardDefinition = new CardDefinition(ViewModel);
        CardService.Register(_cardDefinition);
    }

    public RenderFragment GetHeaderContent()
        => HeaderContent.Invoke(ViewModel);

    public RenderFragment GetBodyContent()
        => BodyContent.Invoke(ViewModel);

    public RenderFragment? GetFooterContent()
    {
        if (FooterContent != null)
            return FooterContent.Invoke(ViewModel);

        return null;
    }
}


<div class="card ">
   <div class="card-header">
       @GetHeaderContent()
   </div>
   <div class="card-body ">
       @GetBodyContent()
   </div>
   @if(FooterContent != null)
   {
       <div class="card-footer">
           @GetFooterContent()
       </div>
   }
</div>
<Card TViewModel="IUserInformationCardViewModel" style="width:200px">
       <HeaderContent>
           <div>
               <h5 class="">Urlaubsplanung</h5>
           </div>
       </HeaderContent> 
</Card>

Du kannst nicht einfach so weitere Attribute dran klatschen; auch wenn es so aussieht, aber es sind keine HTML-Elemente. Sie funktionieren anders.
Du kannst nur die Attribute verwenden, die Du selbst definierst. Willst Du style haben, dann musst das auch definieren und behandeln.

Es sind keine TagHelper oder ViewComponents, wie man sie aus der ASP.NET Welt kennt.


CSS Styles über ein Style-Attribut zu machen ist ohnehin nicht die Idee in modernen Frameworks wie Angular oder Blazor.
Ansonsten funktionieren deren Style-Systeme wie Blazor CSS Isolation nicht. Beachte, wie Frameworks funktionieren und verwende deren Konzepte.