TabControl Header Item Style Custom.

1 Answer 21 Views
Styling TabControl
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Psyduck asked on 02 Jun 2021, 02:01 AM | edited on 02 Jun 2021, 02:08 AM

Hello.

 

I want to customize the header for the tab control.

1.(red) I want to change or delete the color of the underlined line for the selected item.

2(blue). I want to change the mouse hover background color of tab items.

3.(orenge). There is a "+" button after the menu with AdditionalContent. I also want to put a "*" in front of the menu.

 

Some old data used navigationtabcontrol, so I couldn't find a recent example.

I'd appreciate it if you could tell me how to style each of these.

Thanks.

1 Answer, 1 is accepted

Sort by
1
Accepted
Vladimir Stoyanov
Telerik team
answered on 04 Jun 2021, 10:17 AM

Hello Kim,

Thank you for the shared picture. I am going straight to your questions.

1. You can set the MaterialAssist.FocusBrush to Transparent through a style targeting RadTabItem.

2. You can use the MaterialAssist.MouseOverBrush in a similar manner.

3. You can extract and update the ControlTemplate of the RadTabControl and place the button in front of the tab items. 

I am attaching a sample project demonstrating the above suggestions. Do check it out and let me know, if it helps. 

Regards,
Vladimir Stoyanov
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/.

Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
commented on 07 Jun 2021, 12:41 AM

It was more complicated than I thought to create a template to place the button in front.

This has been of great help to me. thank you.
Tags
Styling TabControl
Asked by
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Answers by
Vladimir Stoyanov
Telerik team
Share this question
or