Splitter Specification
- Revision History
- Overview
- User Stories
- Functionality
- Acceptance criteria
- Accessibility
- Internationalization
- Assumptions and Limitations
- Test Scenarios
- References
- Konstantin Dinev | Date:
- Radoslav Mirchev | Date:
| Version | User | Date | Notes |
|---|---|---|---|
| 0.1 | Stefan Ivanov | Mar 11, 2020 | Initial draft |
The Splitter component provides a framework for a simple layout splitting the view horizontally or vertically into multiple smaller areas called panes.
As an end-user I want to:
- see two or more content areas side by side with a divider between them e.g. a design surface and its corresponding code view
- resize the panes by dragging the splitter element
- focus the splitter element via the keyboard
- use the keyboard to resize the split panes
- scroll the content if it doesn't fit in the pane in horizontal, vertical, or in both directions
- collapse and expand panes
As a developer I want to:
- provide arbitrary content that is rendered in a splitter's pane
- create a splitter that lays out panes horizontally or vertically determined by an orientation property
- have the vertical splitter layout to respect the right-to-left support that certain cultures may require
- define a default size for each pane
- define a min and max values for the width and height of a pane
- specify a pane as not resizable, which would not allow the user to drag its handle/collapse it
- nest a splitter in another splitter's pane
- have right-to-left support out of the box
Design Hands-Off:
A splitter with a vertical orientation and two panes, where the right one contains scrollable content and shows a scroll bar. On both sides of the drag handle for the splitter separator, there are icons for collapsing the pane to the right/left.
| Name | Description | Type |
|---|---|---|
| Name | Description | Return type | Parameters |
|---|---|---|---|
|
| Name | Description | Cancelable | Arguments |
|---|---|---|---|
| onPaneToggle | Used on pane toggle, emits after changing the hidden state of the pane | True | N/A |
A
| Key | Result |
|---|---|
| Arrow up | Move the splitter element up |
| Arrow down | Move the splitter element down |
| Arrow left | Move the splitter element left |
| Arrow right | Move the splitter element right |
| Ctrl + Arrow | Expand/Collapse a pane with regard to the direction indicated by the arrow |
A
A
A
- S
- S
- S
- A
- S
- S