Styling PanelBar Item

[Jakub]

Hi,
I've tried to implement navigation using PanelBar, as shown here: https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/routing/.
My question is: How to style PanelBar items? I can't find any information about that, and my simple css attempts didn't work.
Is there a better component to implement this feature? 

[Hetali]

Hi Jakub,

In order to style the Kendo UI PanelBar Items, use the following CSS snippet:

.k-panelbar > .k-item > .k-link,
.k-panelbar > .k-item > .k-link:hover {
  background: yellow;
  color: blue;
}

.k-panelbar > .k-item > .k-link.k-state-selected,
.k-panelbar > .k-item > .k-link.k-state-selected:hover {
  background: blue;
  color: yellow;
}

In this StackBlitz example, I have styled the Kendo UI PanelBar Items. Please make sure to set the encapsulation to ViewEncapsulation.None to set the style locally.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Jakub]

Works as a charm!
Thank you.

[Jakub]

Although, if I may ask for you assistance once again.
I'm having some problems styling PB Items nested inside other PB Items (collapsible list).
May I ask for another snippet for that? I believe it will be very useful to others as well.
Thank you very much in advance.

[Hetali]

Hi Jakub,

To style the nested Kendo UI PanelBar items, use the following CSS snippet:

.k-panelbar .k-group > .k-item > .k-link,
.k-panelbar .k-group > .k-item > .k-link:hover {
  background: pink;
  color: black;
}

.k-panelbar .k-group > .k-item > .k-link.k-state-selected,
.k-panelbar .k-group > .k-item > .k-link.k-state-selected:hover {
  background: black;
  color: pink;
}

In this updated StackBlitz example, I have styled the nested PanelBar items.

Please let me know if this helps or if you have any further questions pertaining to this case.

Regards,
Hetali
Progress Telerik

[Jakub]

You have been a great help. Thank you.
Is there maybe a document summarizing all the classes used in certain components that I somehow missed?

[Hetali]

Hi Jakub,

I am glad I could help.

There is no document summarizing the classes. I inspected the element and got the class name from the developer console.

Regards,
Hetali
Progress Telerik