UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

132 lines (125 loc) • 3.92 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
--- id: Simple list section: components beta: true cssPrefix: pf-c-simple-list --- ## Examples ### Simple list ```hbs {{#> simple-list}} {{#> simple-list-list}} {{#> simple-list-item}} {{#> simple-list-item-link simple-list-item-link--modifier="pf-m-current"}} List item 1 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 2 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 3 {{/simple-list-item-link}} {{/simple-list-item}} {{/simple-list-list}} {{/simple-list}} ``` ### Simple list with links ```hbs {{#> simple-list simple-list-item-link--IsLink="true"}} {{#> simple-list-list}} {{#> simple-list-item}} {{#> simple-list-item-link simple-list-item-link--modifier="pf-m-current"}} List item 1 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 2 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 3 {{/simple-list-item-link}} {{/simple-list-item}} {{/simple-list-list}} {{/simple-list}} ``` ### Grouped list ```hbs {{#> simple-list}} {{#> simple-list-section}} {{#> simple-list-title}} Title {{/simple-list-title}} {{#> simple-list-list}} {{#> simple-list-item}} {{#> simple-list-item-link simple-list-item-link--modifier="pf-m-current"}} List item 1 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 2 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 3 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 4 {{/simple-list-item-link}} {{/simple-list-item}} {{/simple-list-list}} {{/simple-list-section}} {{#> simple-list-section}} {{#> simple-list-title}} Title {{/simple-list-title}} {{#> simple-list-list}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 1 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 2 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 3 {{/simple-list-item-link}} {{/simple-list-item}} {{#> simple-list-item}} {{#> simple-list-item-link}} List item 4 {{/simple-list-item-link}} {{/simple-list-item}} {{/simple-list-list}} {{/simple-list-section}} {{/simple-list}} ``` ## Documentation ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `tabindex="0"` | `a.pf-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-c-simple-list` | `<div>` | Initiates a simple list. | | `.pf-c-simple-list__section` | `<section>` | Initiates a simple list section. | | `.pf-c-simple-list__title` | `<h2>` | Initiates a simple list title. | | `.pf-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. | | `.pf-c-simple-list__item` | `<li>` | Initiates a simple list item. | | `.pf-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. | | `.pf-m-current` | `.pf-c-simple-list__item-link` | Modifies the simple list item link for the current state. |