Hi Team,
working on a accordian tab with header tabs -one Two ThreeWhen one tab is selected , need the tab value of one to be set as bold text.. similary if two tab is selected, the choosen tab 2 will be selected as bold .
Hi Saif,
If you're using Navigation\Tabs (not Accordion) here's the solution for that:
1. Add "my-custom-class" in the parameter:
2. Add following css in your web-block or screen:
.my-custom-class .osui-tabs__header-item.osui-tabs--is-active{ font-weight: bold;}
Hi Ravi, created a custom class first,added to the extended class. then added to the css of the screen level. Could you review.
You have to set your extended css class value in Tabs widget not in TabsHeaderItem
You can accomplish this by adding a local variable that stores the active tab onTabChange.And have a condition that adds the bold style to that element like this:
If(ActiveTab = 1, "font-weight: bold;","")
By default, the title of currently open accordion item is displayed in semi-bold letters.
However, you can see in screenshot that I've added a custom-class in my Accordion by sending "custom-class" value in ExtendedClass input parameter of Accordion.
With this, you can add your custom styling using the following CSS code:
.custom-class .osui-accordion-item--is-open > .osui-accordion-item__title { font-weight: bold; color-red;}
great answer,
this is how I would do it for maximum control with minimum number of moving parts.
Only exception : if you want this modification on ALL your tab or ALL your accordeon widgets (not clear from your question which you are actually talking about) in a module or screen, leave out the custom class for even less moving parts, just override the OSUI CSS in screen OR module CSS.
.osui-accordion-item--is-open > .osui-accordion-item__title { font-weight: bold; color-red;}
Dorine