They typically render a floating panel in the center of the screen, and use a backdrop to dim the rest of the application's contents. Dialogs are meant to grab the user's full attention. They are typically rendered inline and reflow the document when they're shown or hidden. Disclosures are useful for elements that expand to reveal additional information, like a toggleable FAQ section. They're great for building header nav items with expandable content and flyout panels. The Tab key navigates the contents of a Popover like it would any other normal markup. They appear near the button that triggers them, and you can put arbitrary markup in them like images or non-clickable content. Popovers are general-purpose floating menus. ![]() Here's when you might use other similar components from Headless UI: Instead, the arrow keys navigate through a Menu's items. Focus is trapped in an open menu, so you cannot Tab through the content or away from the menu. They have specific accessibility semantics, and their content should be restricted to a list of links or buttons. Menus are best for UI elements that resemble things like the menus you'd find in the title bar of most operating systems. This is easy to change using the as prop, which exists on every component.Īll relevant ARIA attributes are automatically managed.įor a full reference on all accessibility features implemented in Menu, see the ARIA spec on Menu Buttons. ![]() By contrast, Menu and Menu.Item do not render anĮlement, and instead render their children directly by default. Rendering a different element for a componentīy default, the Menu and its subcomponents each render a default element that is sensible for that component.įor example, Menu.Button renders a button by default, and Menu.Items If you want to build a dropdown with more flexible content, consider using Popover instead. ![]() The accessibility semantics of role="menu" are fairly strict and any children of a Menu that are not Menu.Item components will be automatically hidden from assistive technology to make sure the menu works the way screen reader users expect.įor this reason, rendering any children other than Menu.Item components is discouraged as that content will be inaccessible to people using assistive technology. Props that you can use to conditionally apply different styles or render different content.įor example, the Menu.Item component exposes an active state, which tells you if the item is currently focused via the mouse or keyboard.īecause they're renderless, Headless UI components also compose well with other animation libraries in the React ecosystem like Framer Motion and React Spring. Using render propsĮach component exposes information about its current state via render Headless UI keeps track of a lot of state about each component, like which listbox option is currently selected, whether a popover is open or closed, or which item in a menu is currently active via the keyboard.īut because the components are headless and completely unstyled out of the box, you can't see this information in your UI until you provide the styles you want for each state yourself.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |