coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCardImage,
8
  CCardText,
9
  CCardTitle,
10
  CCol,
11
  CPlaceholder,
12
  CRow,
13
} from '@coreui/react'
14
import { DocsExample } from 'src/components'
15

16
import ReactImg from 'src/assets/images/react.jpg'
17

18
const Placeholders = () => {
19
  return (
20
    <CRow>
21
      <CCol xs={12}>
22
        <CCard className="mb-4">
23
          <CCardHeader>
24
            <strong>React Placeholder</strong>
25
          </CCardHeader>
26
          <CCardBody>
27
            <p className="text-body-secondary small">
28
              In the example below, we take a typical card component and recreate it with
29
              placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
30
              same between the two.
31
            </p>
32
            <DocsExample href="components/placeholder">
33
              <div className="d-flex justify-content-around p-3">
34
                <CCard style={{ width: '18rem' }}>
35
                  <CCardImage orientation="top" src={ReactImg} />
36
                  <CCardBody>
37
                    <CCardTitle>Card title</CCardTitle>
38
                    <CCardText>
39
                      Some quick example text to build on the card title and make up the bulk of the
40
                      card&#39;s content.
41
                    </CCardText>
42
                    <CButton color="primary" href="#">
43
                      Go somewhere
44
                    </CButton>
45
                  </CCardBody>
46
                </CCard>
47
                <CCard style={{ width: '18rem' }}>
48
                  <CCardImage
49
                    component="svg"
50
                    orientation="top"
51
                    width="100%"
52
                    height="162"
53
                    xmlns="http://www.w3.org/2000/svg"
54
                    role="img"
55
                    aria-label="Placeholder"
56
                    preserveAspectRatio="xMidYMid slice"
57
                    focusable="false"
58
                  >
59
                    <title>Placeholder</title>
60
                    <rect width="100%" height="100%" fill="#868e96"></rect>
61
                  </CCardImage>
62
                  <CCardBody>
63
                    <CPlaceholder component={CCardTitle} animation="glow" xs={7}>
64
                      <CPlaceholder xs={6} />
65
                    </CPlaceholder>
66
                    <CPlaceholder component={CCardText} animation="glow">
67
                      <CPlaceholder xs={7} />
68
                      <CPlaceholder xs={4} />
69
                      <CPlaceholder xs={4} />
70
                      <CPlaceholder xs={6} />
71
                      <CPlaceholder xs={8} />
72
                    </CPlaceholder>
73
                    <CPlaceholder
74
                      color="primary"
75
                      component={CButton}
76
                      disabled
77
                      href="#"
78
                      tabIndex={-1}
79
                      xs={6}
80
                    ></CPlaceholder>
81
                  </CCardBody>
82
                </CCard>
83
              </div>
84
            </DocsExample>
85
          </CCardBody>
86
        </CCard>
87
        <CCard className="mb-4">
88
          <CCardHeader>
89
            <strong>React Placeholder</strong>
90
          </CCardHeader>
91
          <CCardBody>
92
            <p className="text-body-secondary small">
93
              Create placeholders with the <code>&lt;CPlaceholder&gt;</code> component and a grid
94
              column propx (e.g., <code>xs={6}</code>) to set the <code>width</code>. They can
95
              replace the text inside an element or be added as a modifier class to an existing
96
              component.
97
            </p>
98
            <DocsExample href="components/placeholder">
99
              <p aria-hidden="true">
100
                <CPlaceholder xs={6} />
101
              </p>
102
              <CPlaceholder
103
                color="primary"
104
                component={CButton}
105
                aria-hidden="true"
106
                disabled
107
                href="#"
108
                tabIndex={-1}
109
                xs={4}
110
              ></CPlaceholder>
111
            </DocsExample>
112
          </CCardBody>
113
        </CCard>
114
        <CCard className="mb-4">
115
          <CCardHeader>
116
            <strong>React Placeholder</strong> <small> Width</small>
117
          </CCardHeader>
118
          <CCardBody>
119
            <p className="text-body-secondary small">
120
              You can change the <code>width</code> through grid column classes, width utilities, or
121
              inline styles.
122
            </p>
123
            <DocsExample href="components/placeholder#width">
124
              <CPlaceholder xs={6} />
125
              <CPlaceholder className="w-75" />
126
              <CPlaceholder style={{ width: '30%' }} />
127
            </DocsExample>
128
          </CCardBody>
129
        </CCard>
130
        <CCard className="mb-4">
131
          <CCardHeader>
132
            <strong>React Placeholder</strong> <small> Color</small>
133
          </CCardHeader>
134
          <CCardBody>
135
            <p className="text-body-secondary small">
136
              By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This
137
              can be overridden with a custom color or utility class.
138
            </p>
139
            <DocsExample href="components/placeholder#color">
140
              <CPlaceholder xs={12} />
141

142
              <CPlaceholder color="primary" xs={12} />
143
              <CPlaceholder color="secondary" xs={12} />
144
              <CPlaceholder color="success" xs={12} />
145
              <CPlaceholder color="danger" xs={12} />
146
              <CPlaceholder color="warning" xs={12} />
147
              <CPlaceholder color="info" xs={12} />
148
              <CPlaceholder color="light" xs={12} />
149
              <CPlaceholder color="dark" xs={12} />
150
            </DocsExample>
151
          </CCardBody>
152
        </CCard>
153
        <CCard className="mb-4">
154
          <CCardHeader>
155
            <strong>React Placeholder</strong> <small> Sizing</small>
156
          </CCardHeader>
157
          <CCardBody>
158
            <p className="text-body-secondary small">
159
              The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
160
              the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
161
              <code>sm</code>, or <code>xs</code>.
162
            </p>
163
            <DocsExample href="components/placeholder#sizing">
164
              <CPlaceholder xs={12} size="lg" />
165
              <CPlaceholder xs={12} />
166
              <CPlaceholder xs={12} size="sm" />
167
              <CPlaceholder xs={12} size="xs" />
168
            </DocsExample>
169
          </CCardBody>
170
        </CCard>
171
        <CCard className="mb-4">
172
          <CCardHeader>
173
            <strong>React Placeholder</strong> <small> Animation</small>
174
          </CCardHeader>
175
          <CCardBody>
176
            <p className="text-body-secondary small">
177
              Animate placeholders with <code>animation=&#34;glow&#34;</code> or{' '}
178
              <code>animation=&#34;wave&#34;</code> to better convey the perception of something
179
              being <em>actively</em> loaded.
180
            </p>
181
            <DocsExample href="components/placeholder#animation">
182
              <CPlaceholder component="p" animation="glow">
183
                <CPlaceholder xs={12} />
184
              </CPlaceholder>
185

186
              <CPlaceholder component="p" animation="wave">
187
                <CPlaceholder xs={12} />
188
              </CPlaceholder>
189
            </DocsExample>
190
          </CCardBody>
191
        </CCard>
192
      </CCol>
193
    </CRow>
194
  )
195
}
196

197
export default Placeholders
198