This is a migrated thread and some comments may be shown as answers.

Styling PanelBar Item

6 Answers 16 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Jakub
Top achievements
Rank 1
Jakub asked on 05 Feb 2021, 12:04 PM
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? 

6 Answers, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 08 Feb 2021, 11:25 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jakub
Top achievements
Rank 1
answered on 15 Feb 2021, 09:52 AM
Works as a charm!
Thank you.
0
Jakub
Top achievements
Rank 1
answered on 15 Feb 2021, 11:26 AM
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.
0
Hetali
Telerik team
answered on 16 Feb 2021, 03:12 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jakub
Top achievements
Rank 1
answered on 17 Feb 2021, 10:21 AM
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?

0
Hetali
Telerik team
answered on 17 Feb 2021, 04:56 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
PanelBar
Asked by
Jakub
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Jakub
Top achievements
Rank 1
Share this question
or