Multi Color Tabs in TabStrip
Usually all tabs appear in one or two colors, depending on whether tab is selected or not. In some cases (like in OneNote application), to improve visual representation it is better to display each tab in a different color.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to display tabs in multiple different colors.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As above demo shows, there are several tabs where tab header has a different color for background and border. To simplify the example, only tab headers are affected, but you can customize the appearance if TabStrip component in whole, simply using custom CSS classes.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue.
Tabs in Different Colors
In order to create multi color tabs, you need to modify the CSS styles or create your own classes that will override the default appearance of the TabStrip Component.
Another much simpler way is to apply inline styles for each tab. You can set up styles for each tab state: disabled, normal, hovered and selected. Here is an example of tab object with styles set:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
When using inline styles set in tab object, they will override any settings from the CSS classes, default or custom ones. Using this approach is efficient, when you want to change the appearance of tabs on demand during run-rime, based on some condition.
To customize the TabStrip appearance, you can also use the customStyle property that points to an object that holds CSS classes for different parts of the TabStrip, including tab headers and their content.
Conclusion
By modifying the CSS classes using selectors, you can customize the appearance of TabStrip component so that each tab can appear in a different color. You can also set inline styles for each tab separately, and change its appearance of demand during run-time.
TabStrip is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.