Skip to content

Commit 1a4ceb2

Browse files
mrholekmrholek
committed
docs: update CToast documentation
1 parent 81d47be commit 1a4ceb2

File tree

1 file changed

+168
-9
lines changed

1 file changed

+168
-9
lines changed

‎src/components/toast/CToast.mdx

Lines changed: 168 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ route: /components/toast
99
import { useState, useRef } from 'react'
1010
import { Playground, Props } from 'docz'
1111
import { CButton } from '../button/CButton.tsx'
12+
import { CButtonClose } from '../button/CButtonClose.tsx'
1213
import { CToast } from './CToast.tsx'
14+
import { CToastBody } from './CToastBody.tsx'
15+
import { CToastClose } from './CToastClose.tsx'
16+
import { CToastHeader } from './CToastHeader.tsx'
1317
import { CToaster } from './CToaster.tsx'
1418

1519
React toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
@@ -30,8 +34,8 @@ To encourage extensible and predictable toasts, we recommend a header and body.
3034
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
3135

3236
<Playground>
33-
<CToast
34-
icon={
37+
<CToast title="CoreUI for React.js" autohide={false}>
38+
<CToastHeader close>
3539
<svg
3640
className="rounded me-2"
3741
width="20"
@@ -43,24 +47,179 @@ Toasts are as flexible as you need and have very little required markup. At a mi
4347
>
4448
<rect width="100%" height="100%" fill="#007aff"></rect>
4549
</svg>
46-
}
47-
title="CoreUI for React.js"
48-
time="7 min ago"
49-
autohide={false}
50-
>
51-
Hello, world! This is a toast message.
50+
<strong className="me-auto">CoreUI for React.js</strong>
51+
<small>7 min ago</small>
52+
</CToastHeader>
53+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
5254
</CToast>
5355
</Playground>
5456

5557
<Playground>
5658
{() => {
5759
const [toast, addToast] = useState(0)
5860
const toaster = useRef()
61+
const toast2 = (
62+
<CToast title="CoreUI for React.js">
63+
<CToastHeader close>
64+
<svg
65+
className="rounded me-2"
66+
width="20"
67+
height="20"
68+
xmlns="http://www.w3.org/2000/svg"
69+
preserveAspectRatio="xMidYMid slice"
70+
focusable="false"
71+
role="img"
72+
>
73+
<rect width="100%" height="100%" fill="#007aff"></rect>
74+
</svg>
75+
<strong className="me-auto">CoreUI for React.js</strong>
76+
<small>7 min ago</small>
77+
</CToastHeader>
78+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
79+
</CToast>
80+
)
5981
return (
6082
<>
61-
<CButton onClick={() => addToast({ title: 'test' })}>Send a toast</CButton>
83+
<CButton onClick={() => addToast(toast2)}>Send a toast</CButton>
6284
<CToaster ref={toaster} push={toast} placement="top-end" />
6385
</>
6486
)
6587
}}
6688
</Playground>
89+
90+
### Translucent
91+
92+
Toasts are slightly translucent to blend in with what's below them.
93+
94+
<Playground>
95+
<div className="bg-dark p-3">
96+
<CToast title="CoreUI for React.js" autohide={false}>
97+
<CToastHeader close>
98+
<svg
99+
className="rounded me-2"
100+
width="20"
101+
height="20"
102+
xmlns="http://www.w3.org/2000/svg"
103+
preserveAspectRatio="xMidYMid slice"
104+
focusable="false"
105+
role="img"
106+
>
107+
<rect width="100%" height="100%" fill="#007aff"></rect>
108+
</svg>
109+
<strong className="me-auto">CoreUI for React.js</strong>
110+
<small>7 min ago</small>
111+
</CToastHeader>
112+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
113+
</CToast>
114+
</div>
115+
</Playground>
116+
117+
### Stacking
118+
119+
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
120+
121+
<Playground>
122+
<CToaster>
123+
<CToast title="CoreUI for React.js" autohide={false}>
124+
<CToastHeader close>
125+
<svg
126+
className="rounded me-2"
127+
width="20"
128+
height="20"
129+
xmlns="http://www.w3.org/2000/svg"
130+
preserveAspectRatio="xMidYMid slice"
131+
focusable="false"
132+
role="img"
133+
>
134+
<rect width="100%" height="100%" fill="#007aff"></rect>
135+
</svg>
136+
<strong className="me-auto">CoreUI for React.js</strong>
137+
<small>7 min ago</small>
138+
</CToastHeader>
139+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
140+
</CToast>
141+
<CToast title="CoreUI for React.js" autohide={false}>
142+
<CToastHeader close>
143+
<svg
144+
className="rounded me-2"
145+
width="20"
146+
height="20"
147+
xmlns="http://www.w3.org/2000/svg"
148+
preserveAspectRatio="xMidYMid slice"
149+
focusable="false"
150+
role="img"
151+
>
152+
<rect width="100%" height="100%" fill="#007aff"></rect>
153+
</svg>
154+
<strong className="me-auto">CoreUI for React.js</strong>
155+
<small>7 min ago</small>
156+
</CToastHeader>
157+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
158+
</CToast>
159+
</CToaster>
160+
</Playground>
161+
162+
### Custom content
163+
164+
Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/4.0/utilities/api"), or by adding your own markup. Here we've created a simpler toast by removing the default `.<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/4.0/utilities/flex") to adjust the layout.
165+
166+
<Playground>
167+
<CToast autohide={false} className="align-items-center">
168+
<div className="d-flex">
169+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
170+
<CToastClose className="me-2 m-auto" />
171+
</div>
172+
</CToast>
173+
</Playground>
174+
175+
176+
Alternatively, you can also add additional controls and components to toasts.
177+
178+
<Playground>
179+
<CToast autohide={false}>
180+
<CToastBody>
181+
Hello, world! This is a toast message.
182+
<div className="mt-2 pt-2 border-top">
183+
<CButton type="button" color="primary" size="sm">
184+
Take action
185+
</CButton>
186+
<CToastClose component={CButton} color="secondary" size="sm" className="ms-1">Close</CToastClose>
187+
</div>
188+
</CToastBody>
189+
</CToast>
190+
</Playground>
191+
192+
### Color schemes
193+
194+
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
195+
196+
<Playground>
197+
<CToast autohide={false} color="primary" className="text-white align-items-center">
198+
<div className="d-flex">
199+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
200+
<CToastClose className="me-2 m-auto" white/>
201+
</div>
202+
</CToast>
203+
</Playground>
204+
205+
## API
206+
207+
### CToast
208+
209+
<Props of={CToast} />
210+
211+
### CToastHeader
212+
213+
<Props of={CToastHeader} />
214+
215+
### CToastBody
216+
217+
<Props of={CToastBody} />
218+
219+
### CToastClose
220+
221+
<Props of={CToastClose} />
222+
223+
### CToaster
224+
225+
<Props of={CToaster} />

0 commit comments

Comments
 (0)