( state : SidePanelTransitionStates ) => void States like 'collapsing' and 'expanding' are tracked in another callback: onStateTransition The function called when the side panel's expanded state changes. Which side the side panel is meant to originate from. The width of the component (in px if it's a number) when it is expanded. If true, sets the expanded state of the side panel The width of the component (in px if it's a number) when it is collapsed. Changing the as prop will change the element interface. Activating the Button closes the Panel and the Overlay so the user can return focus to the main page. A Side Panel that opens over an overlay has a close Button but not a collapse.The overlay helps users focus attention on the contents of the Panel, making it ideal for higher-level navigation and editing or displaying additional information while minimizing distractions. When Panels open over an overlay, the user cannot interact with the main page.Can be temporary, meaning the Panel may disappear when the associated content on the main page is.Ideal for editing specific content within the page or displaying additional information that supports the main content area.Often collapsible but not closable, meaning the Panel remains on the page and cannot beĮditing and Displaying Additional Information.Typically tied to the main content region.Provides users with a way to navigate within an area of your product.When the Side Panel is expanded, tooltip text reads "Collapse" and collapsed, the tooltip reads "Expand."Īlthough the elements within a Side Panel are highly configurable to support various use cases, they are commonly used in the following ways: Local Page Navigation When using the Expand/Collapse Button within the Side Panel, use a Tooltip to provide additional affordance that the icon is interactive and to improve accessibility for the Side Panel.For use cases where a Side Panel is not required to remain open, enabling a Side Panel to automatically collapse when it reaches smaller screen sizes will prevent the panel from taking up too much of the screen until the user wants to take action on it. In use cases where the Side Panel is used to edit content within the page, keeping the Side Panel open and resizing the page content may be ideal. Consider the behavior of Side Panels at different responsive breakpoints and in different use cases.Refer to the Overflow pattern for more information. When the content of the Side Panel exceeds the height of the viewport, overflow behavior such as a scrollbar is introduced.See the Expandable pattern (coming soon!) for more detailed information on horizontal animation. Side Panels can either push and resize content as it expands within a page or float over page content.
SYNTRA SMALL SIDEPANEL FULL
The container spans the full height of the viewport and are flush to the left or right edge of the screen.
Expand/Collapse Button (Optional): Icon only Tertiary Button variant used to open or close the Side Panel.Tooltip (Required if using Expand/Collapse Button): Tooltip used to provide additional visual affordance for the Expand/Collapse Button.
0 kommentar(er)
