You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I like the headlessui-library a lot and I regularly use it in a project I am working for.
In that particular project the designers designed a Listbox-component that looks differently depending on the direction it is opened.
The closed Listbox has rounded corners but the opened Listbox has only rounded corners on the opposite side of the ListboxOptions.
I attached a simple drawing to make that clear:
The problem is that I can specify an anchor-property with the ListboxOptions-component but the ListboxButton-component needs to know the direction the ListboxOptions are actually rendered.
I found out that the ListboxOptions-component exposes an (undocumented?) attribute data-anchor from which I could deduce the direction.
But I do not know how to use that attribute in my ListboxButton-component.
Since the ListboxOptions are rendered to a portal I cannot use the peer: -pseudo selector because ListboxOptions and ListboxButton are no siblings in the DOM.
Could you please tell me how I could implement the given design requirements?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi folks,
I like the headlessui-library a lot and I regularly use it in a project I am working for.
In that particular project the designers designed a
Listbox
-component that looks differently depending on the direction it is opened.The closed
Listbox
has rounded corners but the openedListbox
has only rounded corners on the opposite side of theListboxOptions
.I attached a simple drawing to make that clear:
The problem is that I can specify an
anchor
-property with theListboxOptions
-component but theListboxButton
-component needs to know the direction theListboxOptions
are actually rendered.I found out that the
ListboxOptions
-component exposes an (undocumented?) attributedata-anchor
from which I could deduce the direction.But I do not know how to use that attribute in my
ListboxButton
-component.Since the
ListboxOptions
are rendered to a portal I cannot use thepeer:
-pseudo selector becauseListboxOptions
andListboxButton
are no siblings in the DOM.Could you please tell me how I could implement the given design requirements?
Thank you very much in advance.
Beta Was this translation helpful? Give feedback.
All reactions