UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

118 lines (102 loc) • 3.56 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
--- id: Action list section: components cssPrefix: pf-v5-c-action-list ---## Examples ### Action list single group ```html <div class="pf-v5-c-action-list"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Next</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button> </div> </div> <br />With kebab <div class="pf-v5-c-action-list"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Next</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Kebab"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> ``` ### Action list with icons ```html <div class="pf-v5-c-action-list pf-m-icons"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close"> <i class="fas fa-times" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Kebab"> <i class="fas fa-check" aria-hidden="true"></i> </button> </div> </div> ``` ### Action list multiple groups ```html <div class="pf-v5-c-action-list"> <div class="pf-v5-c-action-list__group"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Next</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button> </div> </div> <div class="pf-v5-c-action-list__group"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Submit</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button> </div> </div> </div> ``` ### Action list with cancel button ```html In modals, forms, data lists <div class="pf-v5-c-action-list"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Save</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button> </div> </div> <br />In wizards <div class="pf-v5-c-action-list"> <div class="pf-v5-c-action-list__group"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-primary" type="button">Next</button> </div> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button> </div> </div> <div class="pf-v5-c-action-list__group"> <div class="pf-v5-c-action-list__item"> <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button> </div> </div> </div> ``` ### Overview ### Usage | Attribute | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-action-list` | `<div>` | Initiates the action list container. | | `.pf-v5-c-action-list__item` | `<div>` | Initiates the action list item container. | | `.pf-v5-c-action-list__group` | `<div>` | Initiates the action list group container. | | `.pf-m-icons` | `.pf-v5-c-action-list`, `.pf-v5-c-action-list__group` | Modifies the action list to support button icons. |