Configure TabStrip appearance

[Nhat]

I'm now finding a way to customize the appearance of TabStrip in our app.

As defined in Kendo default theme, the TabStrip was defined with a border roundness by default and this behavior affects both the border of the tabstrip and closable buttons. I concerned if there's a way to configure the TabStrip roundness which works as button's roundness: https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance/#toc-roundness

Thanks in advance.

 

[Georgi]

Hi Nhat,

Thank you very much for the screenshot provided.

If I understood you correctly, you are currently utilizing the Kendo UI for Angular TabStrip and are looking for an approach that would allow you to modify the component's roundness. Please, correct me if I misinterpreted the requirement.

I am afraid that as of now there is no built-in approach in our API that would allow the developer to customize the roundness of the TabStrip component. 

The good news is that the desired modification could be achieved by utilizing the .k-tabstrip-top > .k-tabstrip-content and .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item custom CSS selectors and adjust the border-radius property: 

.k-tabstrip-top > .k-tabstrip-content {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it: 

https://stackblitz.com/edit/angular-u5d4yg

I hope the provided information helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Nhat]

Thank Georgi for answering my question (incl your StackBlitz).

Yes, this is exactly the matter that I'm trying to solve.

I am concerned if there's a way to configure this behavior which I might miss in your document.

If that's the case, I believe CSS override would be the best solution that we have now.

 

[Martin]

Hi Nhat,

Up to now, there isn't a built-in option to configure the roundness of the TabStrip through a built-in property. Using the proposed CSS is the right way to go so far.