Skip to content

Commit f8e2d9f

Browse files
mrholekmrholek
committed
docs: add esolid example and examples with icons
1 parent 1eea87d commit f8e2d9f

File tree

1 file changed

+114
-3
lines changed

1 file changed

+114
-3
lines changed

‎docs/4.0/components/alert.mdx

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import {
1313
CCallout,
1414
} from './../../../src/index.ts'
1515

16+
import CIcon from '@coreui/icons-react'
17+
18+
import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
1619

1720
## Examples
1821

@@ -79,7 +82,7 @@ React Alert is prepared for any length of text, as well as an optional close but
7982
</p>
8083
</CCallout>
8184

82-
## Link color
85+
### Link color
8386

8487
Use the `<CAlertLink>` component to immediately give matching colored links inside any alert.
8588

@@ -137,7 +140,7 @@ Use the `<CAlertLink>` component to immediately give matching colored links insi
137140
</CAlert>
138141
```
139142

140-
## Additional content
143+
### Additional content
141144

142145
Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
143146

@@ -159,7 +162,115 @@ Alert can also incorporate supplementary components &amp; elements like heading,
159162
</CAlert>
160163
```
161164

162-
## Dismissing
165+
### Icons
166+
167+
Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
168+
169+
<Example>
170+
<CAlert color="primary" className="d-flex align-items-center">
171+
<svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
172+
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" className="ci-primary"></path>
173+
</svg>
174+
<div>
175+
An example alert with an icon
176+
</div>
177+
</CAlert>
178+
</Example>
179+
180+
```jsx
181+
<CAlert color="primary" className="d-flex align-items-center">
182+
<svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
183+
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" className="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" className="ci-primary"></path>
184+
</svg>
185+
<div>
186+
An example alert with an icon
187+
</div>
188+
</CAlert>
189+
```
190+
191+
Need more than one icon for your alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
192+
193+
<Example>
194+
<CAlert color="primary" className="d-flex align-items-center">
195+
<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width="24" height="24" />
196+
<div>
197+
An example alert with an icon
198+
</div>
199+
</CAlert>
200+
<CAlert color="success" className="d-flex align-items-center">
201+
<CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width="24" height="24" />
202+
<div>
203+
An example success alert with an icon
204+
</div>
205+
</CAlert>
206+
<CAlert color="warning" className="d-flex align-items-center">
207+
<CIcon icon={cilWarning} className="flex-shrink-0 me-2" width="24" height="24" />
208+
<div>
209+
An example warning alert with an icon
210+
</div>
211+
</CAlert>
212+
<CAlert color="danger" className="d-flex align-items-center">
213+
<CIcon icon={cilBurn} className="flex-shrink-0 me-2" width="24" height="24" />
214+
<div>
215+
An example danger alert with an icon
216+
</div>
217+
</CAlert>
218+
</Example>
219+
220+
```jsx
221+
<CAlert color="primary" className="d-flex align-items-center">
222+
<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width="24" height="24" />
223+
<div>
224+
An example alert with an icon
225+
</div>
226+
</CAlert>
227+
<CAlert color="success" className="d-flex align-items-center">
228+
<CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width="24" height="24" />
229+
<div>
230+
An example success alert with an icon
231+
</div>
232+
</CAlert>
233+
<CAlert color="warning" className="d-flex align-items-center">
234+
<CIcon icon={cilWarning} className="flex-shrink-0 me-2" width="24" height="24" />
235+
<div>
236+
An example warning alert with an icon
237+
</div>
238+
</CAlert>
239+
<CAlert color="danger" className="d-flex align-items-center">
240+
<CIcon icon={cilBurn} className="flex-shrink-0 me-2" width="24" height="24" />
241+
<div>
242+
An example danger alert with an icon
243+
</div>
244+
</CAlert>
245+
```
246+
247+
### Solid
248+
249+
Use `variant="solid"` to change contextual colors to solid.
250+
251+
<Example>
252+
<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
253+
<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
254+
<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
255+
<CAlert color="danger" variant="solid">A simple solid danger alert—check it out!</CAlert>
256+
<CAlert color="warning" variant="solid">A simple solid warning alert—check it out!</CAlert>
257+
<CAlert color="info" variant="solid">A simple solid info alert—check it out!</CAlert>
258+
<CAlert color="light" variant="solid" class="text-high-emphasis">A simple solid light alert—check it out!</CAlert>
259+
<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
260+
</Example>
261+
262+
```jsx
263+
<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
264+
<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
265+
<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
266+
<CAlert color="danger" variant="solid">A simple solid danger alert—check it out!</CAlert>
267+
<CAlert color="warning" variant="solid">A simple solid warning alert—check it out!</CAlert>
268+
<CAlert color="info" variant="solid">A simple solid info alert—check it out!</CAlert>
269+
<CAlert color="light" variant="solid" class="text-high-emphasis">A simple solid light alert—check it out!</CAlert>
270+
<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
271+
```
272+
273+
### Dismissing
163274

164275
Alerts can also be easily dismissed. Just add the `dismissible` prop.
165276

0 commit comments

Comments
 (0)