Skip to content

Commit b8f4bb4

Browse files
mrholekmrholek
committed
feat: add placeholder component
1 parent 65aaaa3 commit b8f4bb4

File tree

3 files changed

+203
-0
lines changed

3 files changed

+203
-0
lines changed

‎src/_nav.js

+5
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ const _nav = [
9191
name: 'Pagination',
9292
to: '/base/paginations',
9393
},
94+
{
95+
component: CNavItem,
96+
name: 'Placeholders',
97+
to: '/base/placeholders',
98+
},
9499
{
95100
component: CNavItem,
96101
name: 'Popovers',

‎src/routes.js

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
1313
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
1414
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
1515
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
16+
const Placeholders = React.lazy(() => import('./views/base/placeholders/Placeholders'))
1617
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
1718
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
1819
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
@@ -64,6 +65,7 @@ const routes = [
6465
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
6566
{ path: '/base/navs', name: 'Navs', component: Navs },
6667
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
68+
{ path: '/base/placeholders', name: 'Placeholders', component: Placeholders },
6769
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
6870
{ path: '/base/progress', name: 'Progress', component: Progress },
6971
{ path: '/base/spinners', name: 'Spinners', component: Spinners },

‎src/views/base/placeholders/Placeholders.js

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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 { DocsCallout, 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+
<DocsCallout name="Placeholder" href="components/placeholder" />
23+
</CCol>
24+
<CCol xs={12}>
25+
<CCard className="mb-4">
26+
<CCardHeader>
27+
<strong>React Placeholder</strong>
28+
</CCardHeader>
29+
<CCardBody>
30+
<p className="text-medium-emphasis small">
31+
In the example below, we take a typical card component and recreate it with
32+
placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
33+
same between the two.
34+
</p>
35+
<DocsExample href="components/placeholder">
36+
<div className="d-flex justify-content-around p-3">
37+
<CCard style={{ width: '18rem' }}>
38+
<CCardImage orientation="top" src={ReactImg} />
39+
<CCardBody>
40+
<CCardTitle>Card title</CCardTitle>
41+
<CCardText>
42+
Some quick example text to build on the card title and make up the bulk of the
43+
card&#39;s content.
44+
</CCardText>
45+
<CButton href="#">Go somewhere</CButton>
46+
</CCardBody>
47+
</CCard>
48+
<CCard style={{ width: '18rem' }}>
49+
<CCardImage
50+
component="svg"
51+
orientation="top"
52+
width="100%"
53+
height="162"
54+
xmlns="http://www.w3.org/2000/svg"
55+
role="img"
56+
aria-label="Placeholder"
57+
preserveAspectRatio="xMidYMid slice"
58+
focusable="false"
59+
>
60+
<title>Placeholder</title>
61+
<rect width="100%" height="100%" fill="#868e96"></rect>
62+
</CCardImage>
63+
<CCardBody>
64+
<CPlaceholder component={CCardTitle} animation="glow" xs={7}>
65+
<CPlaceholder xs={6} />
66+
</CPlaceholder>
67+
<CPlaceholder component={CCardText} animation="glow">
68+
<CPlaceholder xs={7} />
69+
<CPlaceholder xs={4} />
70+
<CPlaceholder xs={4} />
71+
<CPlaceholder xs={6} />
72+
<CPlaceholder xs={8} />
73+
</CPlaceholder>
74+
<CPlaceholder
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-medium-emphasis 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+
component={CButton}
104+
aria-hidden="true"
105+
disabled
106+
href="#"
107+
tabIndex={-1}
108+
xs={4}
109+
></CPlaceholder>
110+
</DocsExample>
111+
</CCardBody>
112+
</CCard>
113+
<CCard className="mb-4">
114+
<CCardHeader>
115+
<strong>React Placeholder</strong> <small> Width</small>
116+
</CCardHeader>
117+
<CCardBody>
118+
<p className="text-medium-emphasis small">
119+
You can change the <code>width</code> through grid column classes, width utilities, or
120+
inline styles.
121+
</p>
122+
<DocsExample href="components/placeholder#width">
123+
<CPlaceholder xs={6} />
124+
<CPlaceholder className="w-75" />
125+
<CPlaceholder style={{ width: '30%' }} />
126+
</DocsExample>
127+
</CCardBody>
128+
</CCard>
129+
<CCard className="mb-4">
130+
<CCardHeader>
131+
<strong>React Placeholder</strong> <small> Color</small>
132+
</CCardHeader>
133+
<CCardBody>
134+
<p className="text-medium-emphasis small">
135+
By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This
136+
can be overridden with a custom color or utility class.
137+
</p>
138+
<DocsExample href="components/placeholder#color">
139+
<CPlaceholder xs={12} />
140+
141+
<CPlaceholder color="primary" xs={12} />
142+
<CPlaceholder color="secondary" xs={12} />
143+
<CPlaceholder color="success" xs={12} />
144+
<CPlaceholder color="danger" xs={12} />
145+
<CPlaceholder color="warning" xs={12} />
146+
<CPlaceholder color="info" xs={12} />
147+
<CPlaceholder color="light" xs={12} />
148+
<CPlaceholder color="dark" xs={12} />
149+
</DocsExample>
150+
</CCardBody>
151+
</CCard>
152+
<CCard className="mb-4">
153+
<CCardHeader>
154+
<strong>React Placeholder</strong> <small> Sizing</small>
155+
</CCardHeader>
156+
<CCardBody>
157+
<p className="text-medium-emphasis small">
158+
The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
159+
the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
160+
<code>sm</code>, or <code>xs</code>.
161+
</p>
162+
<DocsExample href="components/placeholder#sizing">
163+
<CPlaceholder xs={12} size="lg" />
164+
<CPlaceholder xs={12} />
165+
<CPlaceholder xs={12} size="sm" />
166+
<CPlaceholder xs={12} size="xs" />
167+
</DocsExample>
168+
</CCardBody>
169+
</CCard>
170+
<CCard className="mb-4">
171+
<CCardHeader>
172+
<strong>React Placeholder</strong> <small> Animation</small>
173+
</CCardHeader>
174+
<CCardBody>
175+
<p className="text-medium-emphasis small">
176+
Animate placeholders with <code>animation=&#34;glow&#34;</code> or{' '}
177+
<code>animation=&#34;wave&#34;</code> to better convey the perception of something
178+
being <em>actively</em> loaded.
179+
</p>
180+
<DocsExample href="components/placeholder#animation">
181+
<CPlaceholder component="p" animation="glow">
182+
<CPlaceholder xs={12} />
183+
</CPlaceholder>
184+
185+
<CPlaceholder component="p" animation="wave">
186+
<CPlaceholder xs={12} />
187+
</CPlaceholder>
188+
</DocsExample>
189+
</CCardBody>
190+
</CCard>
191+
</CCol>
192+
</CRow>
193+
)
194+
}
195+
196+
export default Placeholders

0 commit comments

Comments
 (0)