UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

47 lines (35 loc) • 2 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
--- id: Splitter section: components cssPrefix: pf-c-splitter beta: true --- import './Splitter.css' ## Examples ### Default ```html <div class="pf-c-splitter" role="separator" tabindex="0" aria-orientation="horizontal"> <div class="pf-c-splitter__handle"></div> </div> ``` ### Vertical ```html <div class="pf-c-splitter pf-m-vertical" role="separator" tabindex="0" aria-orientation="vertical"> <div class="pf-c-splitter__handle"></div> </div> ``` ## Documentation ### Overview ### Accessibility | Class | Applied to | Outcome | | ------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------- | | `role="separator"` | `.pf-c-splitter` | Indicates that the splitter is a separator. **Required** | | `tabindex="0"` | `.pf-c-splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** | | `aria-orientation="horizontal"` | `.pf-c-splitter` | Indicates that the splitter is oriented horizontally. | | `aria-orientation="vertical"` | `.pf-c-splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. | ### Usage | Class | Applied to | Outcome | | ------------------------ | ---------------- | --------------------------------------------------- | | `.pf-c-splitter` | `<div>` | Initiates the splitter component. **Required** | | `.pf-c-splitter__handle` | `<div>` | Initiates the splitter handle element. **Required** | | `.pf-m-vertical` | `.pf-c-splitter` | Modifies the splitter component to be vertical. |