Sha256: c997624481ce39d5080963e3481d54895315b4c55c390bc8cc199df878901773
Contents?: true
Size: 1.22 KB
Versions: 61
Compression:
Stored size: 1.22 KB
Contents
The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size. ### Within Element The `withinElement` prop allows you to render the drawer within its parent container: - The drawer will be positioned relative to its parent element - Useful for creating nested navigation structures - This must be used in conjunction with the `triggerId` prop This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience. ### Trigger Id The `triggerId` prop allows you to connect an element to control the drawer: - The specified element will toggle the drawer open/closed - The element is automatically hidden when the drawer is opened via breakpoint - The element reappears when the drawer is closed via breakpoint ### Breakpoint Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will: - Close the drawer on screens smaller than the medium breakpoint (992px) - Automatically open the drawer on screens larger than or equal to the medium breakpoint
Version data entries
61 entries across 61 versions & 2 rubygems