Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 18 Feb 2019 12:57 by ADMIN
Jason
Created on: 23 Jan 2019 21:53
Category: KendoReact
Type: Feature Request
3
More complex TabStripTabs (Angular Parity)

I discovered a lack of parity between the React and Angular implementations of the TabStrip/TabStripTab components. Specifically, in the React version the "title" prop determines the contents inside the resulting <k-link> CSS class, whereas the Angular version allows you to set a template, for more complex tab header components.

This became an issue for me, because we have overridden the CSS for a custom progress tracker component built on the tab strip in an Angular implementation. I am now tasked with replicating the component in React, but had to resort to my own TabStrip/TabStripTab classes, instead of being able to use your components. (My goal is to be able to use the existing CSS, maintained by our UX team, out of the box.)

Hope that made sense. Feel free to contact me if it's not clear what I'm asking for, or if there is already a solution to this. Thanks!

 

React version:

 

Angular Version:

 

 

1 comment
ADMIN
Stefan
Posted on: 24 Jan 2019 11:16
Hello, Jason,

Setting custom component inside the title property is supported for the React version of the TabStrip as well:

https://stackblitz.com/edit/react-xf8qxl?file=app/main.js

<TabStripTab disabled={item.disabled} title={<Title/>}>

class Title extends React.Component {
  render() {
    return (
      <p>Custom component with title</p>
    )
  }
} // this can be functional component as well

Let me know if this helps to achieve the desired result, or additional modifications are needed.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Create an account Log In
View
Type
Status
Category