Radix component prop

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?

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?

yes

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

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

gotcha

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.