Styling Questions

Radzen Studio Blazor WebAssembly
1

I've only been using this framework for a few days now but I'm quite pleased. As a PoC I am attempting to convert an existing site to Blazor using your component library. One thing I've gotten stuck on is trying to replicate a dropdown a Card type styling. I couldn't get the DropDown with Template example to work with what I was trying to do but I did get it to work using a RadMenu, though I'm not sure how good/not good this solution is.

What I'm trying to create - Click the badge, Card appears
image

What I made using a RadMenu

image

When Clicked
image

A few problems here...the docs don't indicate what I can use the Template for. Also, I don't seem to be able to manipulate the Icon and text separately. I'd like to have different colors for the Icons based on the status (green for complete, etc.) but would likely keep the text the same, color, but smaller. The menu also pops up and to the right which causes it to go off the screen.

Any thoughts/pointers would be much appreciated.

<RadzenMenu>
    <RadzenMenuItem Icon="newspaper">
        <Template>
            <RadzenBadge BadgeStyle="BadgeStyle.Light" IsPill="true" Text="150" />
            <RadzenMenuItem>
                <RadzenMenuItem Text="@(rNumString)" class="m-3 h4"></RadzenMenuItem>
                <hr />
                <RadzenMenuItem Text="You have 11 New Items" Path="textbox" Icon="mail" class="h5"></RadzenMenuItem>
                <RadzenMenuItem Text="You have 3 Unopened Items" Path="textbox" Icon="priority_high" class="h5"></RadzenMenuItem>
                <RadzenMenuItem Text="You have 1 Completed Items" Path="textbox" Icon="check_circle" class="h5"></RadzenMenuItem>
            </RadzenMenuItem>
        </Template>
    </RadzenMenuItem>
</RadzenMenu>

@code {

Random random = new Random();
int lowerBound = 0;
int upperBound = 1001;


protected int rNum { get; set; }
protected string rNumString { get; set; }

protected async override Task OnInitializedAsync()
{
    rNum = random.Next(lowerBound, upperBound);
    rNumString = $"You have {rNum} New Notifications";
}

}

2

As with any Template of any Radzen.Blazor component you can put components or HTML elements in it.

You can do it in one of the following ways:

  1. Set the class attribute of the RadzenMenuItem and set the color of the icon via CSS.
    <RadzenMenuItem class="my-item" Icon="newspaper">

    .my-item .rzi {
   color: red;
}
  2. Define the icon in the Templete using RadzenIcon and set desired styling.

You can use RadzenProfileMenu which opens "right-aligned".