coreui-free-react-admin-template

1
import React, { useRef, useState } from 'react'
2
import {
3
  CCard,
4
  CCardHeader,
5
  CCardBody,
6
  CButton,
7
  CRow,
8
  CCol,
9
  CToast,
10
  CToastBody,
11
  CToastClose,
12
  CToastHeader,
13
  CToaster,
14
} from '@coreui/react'
15
import { DocsExample } from 'src/components'
16

17
const ExampleToast = () => {
18
  const [toast, addToast] = useState(0)
19
  const toaster = useRef()
20
  const exampleToast = (
21
    <CToast title="CoreUI for React.js">
22
      <CToastHeader closeButton>
23
        <svg
24
          className="rounded me-2"
25
          width="20"
26
          height="20"
27
          xmlns="http://www.w3.org/2000/svg"
28
          preserveAspectRatio="xMidYMid slice"
29
          focusable="false"
30
          role="img"
31
        >
32
          <rect width="100%" height="100%" fill="#007aff"></rect>
33
        </svg>
34
        <strong className="me-auto">CoreUI for React.js</strong>
35
        <small>7 min ago</small>
36
      </CToastHeader>
37
      <CToastBody>Hello, world! This is a toast message.</CToastBody>
38
    </CToast>
39
  )
40
  return (
41
    <>
42
      <CButton color="primary" onClick={() => addToast(exampleToast)}>
43
        Send a toast
44
      </CButton>
45
      <CToaster ref={toaster} push={toast} placement="top-end" />
46
    </>
47
  )
48
}
49

50
const Toasts = () => {
51
  return (
52
    <CRow>
53
      <CCol xs={12}>
54
        <CCard className="mb-4">
55
          <CCardHeader>
56
            <strong>React Toast</strong> <small>Basic</small>
57
          </CCardHeader>
58
          <CCardBody>
59
            <p className="text-body-secondary small">
60
              Toasts are as flexible as you need and have very little required markup. At a minimum,
61
              we require a single element to contain your “toasted” content and strongly encourage a
62
              dismiss button.
63
            </p>
64
            <DocsExample href="components/toast">
65
              <CToast autohide={false} visible={true}>
66
                <CToastHeader closeButton>
67
                  <svg
68
                    className="rounded me-2"
69
                    width="20"
70
                    height="20"
71
                    xmlns="http://www.w3.org/2000/svg"
72
                    preserveAspectRatio="xMidYMid slice"
73
                    focusable="false"
74
                    role="img"
75
                  >
76
                    <rect width="100%" height="100%" fill="#007aff"></rect>
77
                  </svg>
78
                  <strong className="me-auto">CoreUI for React.js</strong>
79
                  <small>7 min ago</small>
80
                </CToastHeader>
81
                <CToastBody>Hello, world! This is a toast message.</CToastBody>
82
              </CToast>
83
            </DocsExample>
84
            <DocsExample href="components/toast">{ExampleToast()}</DocsExample>
85
          </CCardBody>
86
        </CCard>
87
      </CCol>
88
      <CCol xs={12}>
89
        <CCard className="mb-4">
90
          <CCardHeader>
91
            <strong>React Toast</strong> <small>Translucent</small>
92
          </CCardHeader>
93
          <CCardBody>
94
            <p className="text-body-secondary small">
95
              Toasts are slightly translucent to blend in with what&#39;s below them.
96
            </p>
97
            <DocsExample href="components/toast#translucent" tabContentClassName="bg-dark">
98
              <CToast autohide={false} visible={true}>
99
                <CToastHeader closeButton>
100
                  <svg
101
                    className="rounded me-2"
102
                    width="20"
103
                    height="20"
104
                    xmlns="http://www.w3.org/2000/svg"
105
                    preserveAspectRatio="xMidYMid slice"
106
                    focusable="false"
107
                    role="img"
108
                  >
109
                    <rect width="100%" height="100%" fill="#007aff"></rect>
110
                  </svg>
111
                  <strong className="me-auto">CoreUI for React.js</strong>
112
                  <small>7 min ago</small>
113
                </CToastHeader>
114
                <CToastBody>Hello, world! This is a toast message.</CToastBody>
115
              </CToast>
116
            </DocsExample>
117
          </CCardBody>
118
        </CCard>
119
      </CCol>
120
      <CCol xs={12}>
121
        <CCard className="mb-4">
122
          <CCardHeader>
123
            <strong>React Toast</strong> <small>Stacking</small>
124
          </CCardHeader>
125
          <CCardBody>
126
            <p className="text-body-secondary small">
127
              You can stack toasts by wrapping them in a toast container, which will vertically add
128
              some spacing.
129
            </p>
130
            <DocsExample href="components/toast#stacking">
131
              <CToaster className="position-static">
132
                <CToast autohide={false} visible={true}>
133
                  <CToastHeader closeButton>
134
                    <svg
135
                      className="rounded me-2"
136
                      width="20"
137
                      height="20"
138
                      xmlns="http://www.w3.org/2000/svg"
139
                      preserveAspectRatio="xMidYMid slice"
140
                      focusable="false"
141
                      role="img"
142
                    >
143
                      <rect width="100%" height="100%" fill="#007aff"></rect>
144
                    </svg>
145
                    <strong className="me-auto">CoreUI for React.js</strong>
146
                    <small>7 min ago</small>
147
                  </CToastHeader>
148
                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
149
                </CToast>
150
                <CToast autohide={false} visible={true}>
151
                  <CToastHeader closeButton>
152
                    <svg
153
                      className="rounded me-2"
154
                      width="20"
155
                      height="20"
156
                      xmlns="http://www.w3.org/2000/svg"
157
                      preserveAspectRatio="xMidYMid slice"
158
                      focusable="false"
159
                      role="img"
160
                    >
161
                      <rect width="100%" height="100%" fill="#007aff"></rect>
162
                    </svg>
163
                    <strong className="me-auto">CoreUI for React.js</strong>
164
                    <small>7 min ago</small>
165
                  </CToastHeader>
166
                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
167
                </CToast>
168
              </CToaster>
169
            </DocsExample>
170
          </CCardBody>
171
        </CCard>
172
      </CCol>
173
      <CCol xs={12}>
174
        <CCard className="mb-4">
175
          <CCardHeader>
176
            <strong>React Toast</strong> <small>Custom content</small>
177
          </CCardHeader>
178
          <CCardBody>
179
            <p className="text-body-secondary small">
180
              Customize your toasts by removing sub-components, tweaking them with{' '}
181
              <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
182
              markup. Here we&#39;ve created a simpler toast by removing the default{' '}
183
              <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
184
              <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some{' '}
185
              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
186
              layout.
187
            </p>
188
            <DocsExample href="components/toast#custom-content">
189
              <CToast autohide={false} className="align-items-center" visible={true}>
190
                <div className="d-flex">
191
                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
192
                  <CToastClose className="me-2 m-auto" />
193
                </div>
194
              </CToast>
195
            </DocsExample>
196
            <p className="text-body-secondary small">
197
              Alternatively, you can also add additional controls and components to toasts.
198
            </p>
199
            <DocsExample href="components/toast#custom-content">
200
              <CToast autohide={false} visible={true}>
201
                <CToastBody>
202
                  Hello, world! This is a toast message.
203
                  <div className="mt-2 pt-2 border-top">
204
                    <CButton type="button" color="primary" size="sm">
205
                      Take action
206
                    </CButton>
207
                    <CToastClose as={CButton} color="secondary" size="sm" className="ms-1">
208
                      Close
209
                    </CToastClose>
210
                  </div>
211
                </CToastBody>
212
              </CToast>
213
            </DocsExample>
214
          </CCardBody>
215
        </CCard>
216
      </CCol>
217
      <CCol xs={12}>
218
        <CCard className="mb-4">
219
          <CCardHeader>
220
            <strong>React Toast</strong> <small>Custom content</small>
221
          </CCardHeader>
222
          <CCardBody>
223
            <p className="text-body-secondary small">
224
              Building on the above example, you can create different toast color schemes with our{' '}
225
              <a href="https://coreui.io/docs/utilities/colors">color</a> and{' '}
226
              <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
227
              we&#39;ve set <code>color=&#34;primary&#34;</code> and added <code>.text-white</code>{' '}
228
              class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to
229
              our close button. For a crisp edge, we remove the default border with{' '}
230
              <code>.border-0</code>.
231
            </p>
232
            <DocsExample href="components/toast#color-schemes">
233
              <CToast
234
                autohide={false}
235
                color="primary"
236
                className="text-white align-items-center"
237
                visible={true}
238
              >
239
                <div className="d-flex">
240
                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
241
                  <CToastClose className="me-2 m-auto" white />
242
                </div>
243
              </CToast>
244
            </DocsExample>
245
          </CCardBody>
246
        </CCard>
247
      </CCol>
248
    </CRow>
249
  )
250
}
251

252
export default Toasts
253