Centering Tabs Alignment

General
1

Is it possible to center the tabs within the Tab component instead of align left? Thx!

2

You can add a new CSS class with this code:

self div[role="tablist"] {
  justify-content: center;
}

and assign it to your Tab Component.

Hope this solves your issue.

3

Thx. Got it. Appreciate the help. How about increasing the spacing between each tab? How would that be done?

4

You can set the gap:

self div[role="tablist"] {
  justify-content: center;
+  gap: 10px;
}
1 Like
5

more things that should be added to the property editor to limit the number of times css has to be invoked.

1 Like
6

Adding CSS properties to the property editor is an interesting topic.
We’d like to have your feelings about it: what’s a good balance between having a lot of properties in this editor, at the risk of making it overwhelming, vs relying on CSS?
If you have a quick list of properties that are badly missing, we’re all hears.

7

This is a hard one for sure to balance. Maybe add some contextual css help notes/links, or some contextual css options based on the selected component. For example when a more complex but nice looking out of the box / preconfigured component like a tab is selected, contextual options or css contextual help or links detailing some of the main css updates one might make to that type of component? The editor is generally pretty robust and “full”, so I see how it is a balancing challenge.

8

Since you are on a roll and I’m not sure exactly how to google this css…I have 4 tabs on the tablist: | Tab 1 |Tab 2 |Tab 3 |Tab 4 |. I want to set a page state, so that if a boolean qodly source value is true, the text “Tab 1” text becomes red. Any ideas of css etc to turn one of the tabs red? Just not 100% on applying css to qodly tablist. Thx.

9

Hello Robert, thanks for your feedback.

If you want to have a red color to the 1st title of your tab with a true condition on a boolean Qodly Source, these are the steps to do:

  1. Create a state with a condition “true” to the boolean Qodly Source:

    image
    image937Ă—572 30.1 KB

  2. Make sure that you are editing that state (not the base state). Add another CSS Class with these following lines:

self button:first-child{
	color: red !important;
}

In the case above, :first-child represents the first tab title.

If you want another tab, you can change “:first-child” with “:nth-child()” (inside the brackets put the number of which tab you want to apply the style) or “:last-child” for the last title tab.

That CSS class will be applied to the tab only in the state that have the condition “true”:

image
image1720Ă—852 70 KB

So, in my example, when I click on the button “true”, the title “Tab 1” becomes red because the value of the boolean Qodly Source becomes “true”.

image
image1403Ă—857 64 KB

Hope that these steps work on your side.

Best regards.

10

Also, in general, if you want to control the look and feel of the tabs themselves, like the text color, hover effect, or highlighting the selected tab, here’s a styling example you can include in your component’s css class:

/*to control the tab itself*/
self button[role="tab"] {
	color: #CCCCCC;
	padding: 12px;
	border-radius: 6px;
}

/*to control the text color of the selected tab*/
self button[role="tab"][aria-selected="true"] {
	color: #e73351ff;
}

/*to control the border bottom of the selected tab*/
self button[data-headlessui-state="selected"]:after {
	background-color: #e73351ff;
}

/*to control the hovering effect*/
self button[role="tab"]:hover {
	background-color: #dedede !important;
}
11

Perfect. Thx. I can google general CSS stuff but once we start getting into the prebuilt tab component, and knowing each tab is a button and understanding the the 3rd tab is the third child, etc. it does get slightly tricky for me without a road map. This info is perfect. I now get how the tabs component is basically structured css wise and can knock this out. Appreciated!

1 Like
12

why not document the classes, objects, etc., if the solution is “write css”?
if we have to rely on css, and the tree isn’t documented, all of it is unsupported, and are subject to 4d just changing them, at any given time.

13

We have some - but not all - CSS documented. Would you see it differently?
Check it out here:

14

Got it. I was working with the Tab component and see no CSS for that one yet. This seems good guidance for the others.