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 content areas side by side 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
- 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
- define a default width/height per pane
- define a min/max width/height per 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:
| Name | Description | Type |
|---|---|---|
| Name | Description | Return type | Parameters |
|---|---|---|---|
|
| Name | Description | Cancelable | Arguments |
|---|---|---|---|
|
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 |
| Space | Expand/Collapse a pane |
A
A
A
- S
- S
- S
- A
- S
- S