BTP/Splitter
fd-splitter · 4 examples from SAP's documentation · Back to the gallery
About
The Responsive Splitter Layout structures complex application content into defined areas. The areas are resizable manually and programmatically by external triggers such as buttons or menu entries. The split panes and their parent containers are parts of the splitter and have properties that can be changed to meet the application’s needs. **Note**: Resizing logic you should implement yourself.
SplitPaneAnatomy
Split Pane is an independent container that may interact with other panes or pane containers. It holds the Pagination Bar when off-canvas panes are available. The default background is transparent. For translucent background use the \
GripAnatomy
Grip is the component that allows resizing of panes and pane containers. By default, its background is transparent. To apply translucent background to it use the fd-splitter__resizer--translucent modifier class to the fd-splitter__resizer base class. For solid background use fd-splitter__resizer--solid.
Vertical
Horizontal
PaginationBarAnatomy
Not all the panes should be visible at the same time. Some of them might be just hidden or goes off-canvas at certain breakpoint. Navigate into off-canvas panes possible via the navigation. Navigation should be placed in root container. There should be only one or two root panes. In case there is only one on-canvas root pane navigation will be shown just below, having the full width. Otherwise navigation will be shown below the right root pane. **Note:** Navigation logic you should implement yourself.
Examples
Content can be split by the vertical areas (columns) or by the horizontal areas (rows). **Note:** You should explicitly set the dimensions of the splitter component and of the every area otherwise it will be set to the size of the content.