Set RadzenPanelMenuItem background color #917

Closed
opened 2026-01-29 17:46:18 +00:00 by claunia · 4 comments
Owner

Originally created by @Andrey-2021 on GitHub (Jul 10, 2023).

Please add variable
--radzen-panel-menu-item-background-color
that can set background color of parent (whare i set background color) and all childs = RadzenPanelMenuItems

How now i can set all childs background-color?

Thanks.

Originally created by @Andrey-2021 on GitHub (Jul 10, 2023). Please add variable --radzen-panel-menu-item-background-color that can set background color of parent (whare i set background color) and all childs = RadzenPanelMenuItems How now i can set all childs background-color? Thanks.
Author
Owner

@yordanov commented on GitHub (Jul 17, 2023):

Hey @Andrey-2021,
Can you elaborate on that or show screenshots? It is not that clear what are you trying to achieve.

@yordanov commented on GitHub (Jul 17, 2023): Hey @Andrey-2021, Can you elaborate on that or show screenshots? It is not that clear what are you trying to achieve.
Author
Owner

@Andrey-2021 commented on GitHub (Jul 21, 2023):

image

@Andrey-2021 commented on GitHub (Jul 21, 2023): ![image](https://github.com/radzenhq/radzen-blazor/assets/92442252/36fb3148-6631-487f-854f-7025d3dc997e)
Author
Owner

@Andrey-2021 commented on GitHub (Jul 21, 2023):

image

@Andrey-2021 commented on GitHub (Jul 21, 2023): ![image](https://github.com/radzenhq/radzen-blazor/assets/92442252/4341a66e-0688-43cf-96c4-86ffe56cb7eb)
Author
Owner

@yordanov commented on GitHub (Jul 24, 2023):

You can use the --rz-panel-menu-item-background-color CSS variable via style:

<RadzenPanelMenuItem Text="General" Icon="home" style="background-color: lightgreen;">
    <RadzenPanelMenuItem Text="Buttons" Icon="account_circle" style="--rz-panel-menu-item-background-color: lightgreen;"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>

or css class:

<RadzenPanelMenuItem Text="General" Icon="home" style="background-color: lightgreen;">
    <RadzenPanelMenuItem Text="Buttons" Icon="account_circle" Class="light-green-item"></RadzenPanelMenuItem>
</RadzenPanelMenuItem>

<style>
    .light-green-item {
        --rz-panel-menu-item-background-color: lightgreen;
    }
</style>
image

Here is the list of all PanelMenu CSS variables:

fcbbd53dd8/Radzen.Blazor/themes/components/blazor/_panel-menu.scss (L54-L102)

@yordanov commented on GitHub (Jul 24, 2023): You can use the `--rz-panel-menu-item-background-color` CSS variable via style: ```C# <RadzenPanelMenuItem Text="General" Icon="home" style="background-color: lightgreen;"> <RadzenPanelMenuItem Text="Buttons" Icon="account_circle" style="--rz-panel-menu-item-background-color: lightgreen;"></RadzenPanelMenuItem> </RadzenPanelMenuItem> ``` or css class: ```C# <RadzenPanelMenuItem Text="General" Icon="home" style="background-color: lightgreen;"> <RadzenPanelMenuItem Text="Buttons" Icon="account_circle" Class="light-green-item"></RadzenPanelMenuItem> </RadzenPanelMenuItem> <style> .light-green-item { --rz-panel-menu-item-background-color: lightgreen; } </style> ``` <img width="328" alt="image" src="https://github.com/radzenhq/radzen-blazor/assets/1118895/906264eb-ba88-44e1-9b63-761f371f6834"> Here is the list of all PanelMenu CSS variables: https://github.com/radzenhq/radzen-blazor/blob/fcbbd53dd89d1e11915fb03689f350117a7cd445/Radzen.Blazor/themes/components/blazor/_panel-menu.scss#L54-L102
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#917