UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

105 lines (93 loc) • 4.61 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
--- id: Simple list section: components beta: true cssPrefix: pf-c-simple-list --- ## Examples ### Simple list ```html <div class="pf-c-simple-list"> <ul class="pf-c-simple-list__list"> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link pf-m-current" type="button">List item 1</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 2</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 3</button> </li> </ul> </div> ``` ### Simple list with links ```html <div class="pf-c-simple-list"> <ul class="pf-c-simple-list__list"> <li class="pf-c-simple-list__item"> <a class="pf-c-simple-list__item-link pf-m-current" href="#" tabindex="0">List item 1</a> </li> <li class="pf-c-simple-list__item"> <a class="pf-c-simple-list__item-link" href="#" tabindex="0">List item 2</a> </li> <li class="pf-c-simple-list__item"> <a class="pf-c-simple-list__item-link" href="#" tabindex="0">List item 3</a> </li> </ul> </div> ``` ### Grouped list ```html <div class="pf-c-simple-list"> <section class="pf-c-simple-list__section"> <h2 class="pf-c-simple-list__title">Title</h2> <ul class="pf-c-simple-list__list"> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link pf-m-current" type="button">List item 1</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 2</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 3</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 4</button> </li> </ul> </section> <section class="pf-c-simple-list__section"> <h2 class="pf-c-simple-list__title">Title</h2> <ul class="pf-c-simple-list__list"> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 1</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 2</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 3</button> </li> <li class="pf-c-simple-list__item"> <button class="pf-c-simple-list__item-link" type="button">List item 4</button> </li> </ul> </section> </div> ``` ## 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. |