UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

125 lines (114 loc) • 4.71 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
--- id: Alert group section: components cssPrefix: pf-c-alert-group --- ## Examples ### Static alert group ```hbs {{#> alert-group}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-inline pf-m-success" alert--attribute='aria-label="Success alert"'}} {{#> alert-icon alert-icon--type="check-circle"}} {{/alert-icon}} {{#> alert-title}} {{#> screen-reader}}Success alert:{{/screen-reader}} Success alert title {{/alert-title}} {{/alert}} {{/alert-item}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-inline pf-m-danger" alert--attribute='aria-label="Danger alert"'}} {{#> alert-icon alert-icon--type="exclamation-circle"}} {{/alert-icon}} {{#> alert-title}} {{#> screen-reader}}Danger alert:{{/screen-reader}} Danger alert title {{/alert-title}} {{/alert}} {{/alert-item}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-inline pf-m-info" alert--attribute='aria-label="Information alert"'}} {{#> alert-icon alert-icon--type="info-circle"}} {{/alert-icon}} {{#> alert-title}} {{#> screen-reader}}Info alert:{{/screen-reader}} Info alert title {{/alert-title}} {{#> alert-description}} Info alert description. <a href="#">This is a link.</a> {{/alert-description}} {{/alert}} {{/alert-item}} {{/alert-group}} ``` ### Overview `.pf-c-alert-group` is optional when only one alert is needed. It becomes required when more than one alert is used in a list. ### Usage | Attribute | Applied to | Outcome | | -- | -- | -- | | `.pf-c-alert-group` | `<ul>` | Creates an alert group component. **Required** | | `.pf-c-alert-group__item` | `<li>` | Creates an alert group item. **Required** | ### Toast alert group ```hbs isFullscreen {{#> alert-group alert-group--modifier="pf-m-toast"}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success toast alert"'}} {{#> alert-icon alert-icon--type="check-circle"}} {{/alert-icon}} {{#> alert-title alert-title--attribute='id="alert_one_title"'}} {{#> screen-reader}}Success alert:{{/screen-reader}} Success toast alert title {{/alert-title}} {{#> alert-action}} {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Success alert title"'}} <i class="fas fa-times" aria-hidden="true"></i> {{/button}} {{/alert-action}} {{/alert}} {{/alert-item}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger toast alert"'}} {{#> alert-icon alert-icon--type="exclamation-circle"}} {{/alert-icon}} {{#> alert-title alert-title--attribute='id="alert_two_title"'}} {{#> screen-reader}}Danger alert:{{/screen-reader}} Danger toast alert title {{/alert-title}} {{#> alert-action}} {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Success alert title"'}} <i class="fas fa-times" aria-hidden="true"></i> {{/button}} {{/alert-action}} {{/alert}} {{/alert-item}} {{#> alert-item}} {{#> alert alert--modifier="pf-m-info" alert--attribute='aria-label="Information toast alert"'}} {{#> alert-icon alert-icon--type="info-circle"}} {{/alert-icon}} {{#> alert-title alert-title--attribute='id="alert_three_title"'}} {{#> screen-reader}}Info alert:{{/screen-reader}} Info toast alert title {{/alert-title}} {{#> alert-description}} Info toast alert description. <a href="#">This is a link.</a> {{/alert-description}} {{#> alert-action}} {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Success alert title"'}} <i class="fas fa-times" aria-hidden="true"></i> {{/button}} {{/alert-action}} {{/alert}} {{/alert-item}} {{/alert-group}} ``` ### Overview An alert group that includes the `.pf-m-toast` modifier becomes a toast alert group with unique positioning in the top-right corner of the window. `.pf-c-alert-group` is required to create a toast alert group. Every toast alert must include a close button to dismiss the alert. ### Modifiers | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. | ## Documentation ### Overview Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.