This sample demonstrates using Shell and Shell Panel components to create resizable content areas. By using the resizable property of Shell Panel, users can adjust the size of the content to suit their needs — creating for a flexible and customizable user interface.
Functionality considerations
When creating resizable panels, it's important to consider the overall layout of the application and how the panels will fit within that layout. You can use a combination of CSS and Calcite's layout components to create a flexible and responsive design.
Component functionality
In this sample application, there are multiple content regions in a vertically adjustable Shell Panel. Additionally, the Shell Panel that the resizable Shell Panels are contained within is also resizable, allowing for a high degree of customization for the user.
As this workflow is likely presented in an information-dense, data-centric application, the components are using the small value for scale to allow for more content to fit within the Panel components.
Responsive behavior
The Shell Panel component will automatically constrain itself to the available space within its container. When the resizable property is enabled, users can adjust the width of the Shell Panel by dragging its edge. This allows for a flexible and customizable user interface that can adapt to different content and user preferences.
The developer can control the minimum and maximum widths of the resizable Shell Panel using corresponding CSS properties. It is important to consider the content and functionality of all content in resizable areas. The developer must ensure minimum and maximum widths are set in a way that ensures the content remains usable and accessible at all sizes, and this can vary widely depending on use case.
Sometimes it may be desirable to have content initially collapsed. Ensure the minimum height of the Panel is sufficient to allow users to easily view the Panel heading and interact with the resizable affordance.
Implementation details
This sample relies on using the CSS properties of Shell Panel to set meaningful boundaries on the user's ability to resize the panels and ensure the application remains usable at all sizes.