Join the Webstudio community

Updated 8 months ago

Radix component prop

At a glance
I was reading the Radix documentation and noticed the props. I thought I'd test out the orientation on tabs & navigation. Using custom properties, I added the data-orientation="vertical" to each item the documents suggested. The rendered output matches the Radix DOM. Should something change?
Attachment
CleanShot_2024-06-17_at_15.44.222x.png
O
J
J
22 comments
No, the attributes are only for styling there, they don't control the component, the component controlls them
but you prob can add that property
in the properties paenl
I'm confused, the second image I attached is the properties panel. There is only 1 properties panel, correct?
tabs have orientation prop in the root
data-orientation is set on the element by radix for styling, you don't need to add it
@Jeremy is this resolved?
I didn't understand the answer to be honest.
try orientation
Attachment
image.png
this controls keyboard behavior only to my knowledge. not design
orientation without data prefix to clarify
Thanks, I'll test that right now.

I was reading in some Radix github issues that it's possibly for keyboard behavior as well. It didn't make any difference how I did it previously, but I didn't get the radio options.
radio options show up without data prefix. I guess there is a difference between the root definition and the data- attr. Couldnt tell you why there are two though
data- stuff is generated by radix, its not for using from builder, its an html representation of internal state
its there for styling based on those states, which we don't have yet, or better to say we don't have abiltiy to create custom states for styles based on any attribute, the known attributes should be already exposed via custom token states
Ah, thank you both. I now understand.
@John Siciliano, the keyboard orientation does function as expected when adding "orientation" property. It switches which arrows are used to navigate (up/down to left/right). This is resolved. πŸ™‚
Sweet. Good to know that's an option. Probably wouldnt have thought to switch that if i made them vertically designed
https://ai-test-5n60l.wstd.io/tabs you can try the keyboard keys here if you're interested.
When you're on the first tabs, you use up/down and when you're on the default set, you use left/right.
Add a reply
Sign up and join the conversation on Discord