Skip to content

Commit 3ac510e

Browse files
mrholekmrholek
committed
feat: add CPlaceholder component
1 parent a46ab69 commit 3ac510e

File tree

3 files changed

+200
-1
lines changed

3 files changed

+200
-1
lines changed

‎src/_nav.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,16 @@ export default [
7070
name: 'Navs & Tabs',
7171
to: '/base/navs',
7272
},
73-
7473
{
7574
component: 'CNavItem',
7675
name: 'Paginations',
7776
to: '/base/paginations',
7877
},
78+
{
79+
component: 'CNavItem',
80+
name: 'Placeholders',
81+
to: '/base/placeholders',
82+
},
7983
{
8084
component: 'CNavItem',
8185
name: 'Popovers',

‎src/router/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ const routes = [
8484
name: 'Paginations',
8585
component: () => import('@/views/base/Paginations.vue'),
8686
},
87+
{
88+
path: '/base/placeholders',
89+
name: 'Placeholders',
90+
component: () => import('@/views/base/Placeholders.vue'),
91+
},
8792
{
8893
path: '/base/popovers',
8994
name: 'Popovers',

‎src/views/base/Placeholders.vue

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<CRow>
3+
<CCol :xs="12">
4+
<DocsCallout name="Placeholder" href="components/placeholder" />
5+
</CCol>
6+
<CCol :xs="12">
7+
<CCard class="mb-4">
8+
<CCardHeader>
9+
<strong>Vue Placeholder</strong>
10+
</CCardHeader>
11+
<CCardBody>
12+
<p class="text-medium-emphasis small">
13+
In the example below, we take a typical card component and recreate
14+
it with placeholders applied to create a "loading card". Size and
15+
proportions are the same between the two.
16+
</p>
17+
<DocsExample href="components/placeholder">
18+
<div class="d-flex justify-content-around">
19+
<CCard style="width: 18rem">
20+
<CCardImage orientation="top" :src="VueImg" />
21+
<CCardBody>
22+
<CCardTitle>Card title</CCardTitle>
23+
<CCardText>
24+
Some quick example text to build on the card title and make
25+
up the bulk of the card's content.
26+
</CCardText>
27+
<CButton color="primary" href="#">Go somewhere</CButton>
28+
</CCardBody>
29+
</CCard>
30+
<CCard style="width: 18rem">
31+
<CCardImage
32+
component="svg"
33+
orientation="top"
34+
width="100%"
35+
height="162"
36+
role="img"
37+
aria-label="Placeholder"
38+
preserveAspectRatio="xMidYMid slice"
39+
focusable="false"
40+
>
41+
<title>Placeholder</title
42+
><rect width="100%" height="100%" fill="#868e96"></rect>
43+
</CCardImage>
44+
<CCardBody>
45+
<CCardTitle v-c-placeholder="{ animation: 'glow', xs: 7 }">
46+
<CPlaceholder :xs="6" />
47+
</CCardTitle>
48+
<CCardText v-c-placeholder="{ animation: 'glow' }">
49+
<CPlaceholder :xs="7" />
50+
<CPlaceholder :xs="4" />
51+
<CPlaceholder :xs="4" />
52+
<CPlaceholder :xs="6" />
53+
<CPlaceholder :xs="8" />
54+
</CCardText>
55+
<CButton
56+
v-c-placeholder="{ xs: 6 }"
57+
color="primary"
58+
aria-hidden="true"
59+
disabled
60+
href="#"
61+
tabindex="-1"
62+
></CButton>
63+
</CCardBody>
64+
</CCard>
65+
</div>
66+
</DocsExample>
67+
</CCardBody>
68+
</CCard>
69+
<CCard class="mb-4">
70+
<CCardHeader>
71+
<strong>Vue Placeholder</strong>
72+
</CCardHeader>
73+
<CCardBody>
74+
<p>
75+
Create placeholders with the
76+
<code>&lt;CPlaceholder&gt;</code> component and a grid column propx
77+
(e.g., <code>:xs="6"</code>) to set the <code>width</code>. They can
78+
replace the text inside an element or be added as a modifier class
79+
to an existing component.
80+
</p>
81+
<DocsExample href="components/placeholder">
82+
<p aria-hidden="true">
83+
<CPlaceholder :xs="6" />
84+
</p>
85+
<CButton
86+
v-c-placeholder="{ xs: 4 }"
87+
color="primary"
88+
aria-hidden="true"
89+
disabled
90+
href="#"
91+
tabindex="-1"
92+
></CButton>
93+
</DocsExample>
94+
</CCardBody>
95+
</CCard>
96+
<CCard class="mb-4">
97+
<CCardHeader>
98+
<strong>Vue Placeholder</strong> <small> Width</small>
99+
</CCardHeader>
100+
<CCardBody>
101+
<p>
102+
You can change the <code>width</code> through grid column classes,
103+
width utilities, or inline styles.
104+
</p>
105+
<DocsExample href="components/placeholder#width">
106+
<CPlaceholder :xs="6" />
107+
<CPlaceholder class="w-75" />
108+
<CPlaceholder style="width: 30%" />
109+
</DocsExample>
110+
</CCardBody>
111+
</CCard>
112+
<CCard class="mb-4">
113+
<CCardHeader>
114+
<strong>Vue Placeholder</strong> <small> Color</small>
115+
</CCardHeader>
116+
<CCardBody>
117+
<p>
118+
By default, the <code>&lt;CPlaceholder&gt;</code> uses
119+
<code>currentColor</code>. This can be overridden with a custom
120+
color or utility class.
121+
</p>
122+
<DocsExample href="components/placeholder#color">
123+
<CPlaceholder :xs="12" />
124+
125+
<CPlaceholder color="primary" :xs="12" />
126+
<CPlaceholder color="secondary" :xs="12" />
127+
<CPlaceholder color="success" :xs="12" />
128+
<CPlaceholder color="danger" :xs="12" />
129+
<CPlaceholder color="warning" :xs="12" />
130+
<CPlaceholder color="info" :xs="12" />
131+
<CPlaceholder color="light" :xs="12" />
132+
<CPlaceholder color="dark" :xs="12" />
133+
</DocsExample>
134+
</CCardBody>
135+
</CCard>
136+
<CCard class="mb-4">
137+
<CCardHeader>
138+
<strong>Vue Placeholder</strong> <small> Sizing</small>
139+
</CCardHeader>
140+
<CCardBody>
141+
<p>
142+
The size of <code>&lt;CPlaceholder&gt;</code>s are based on the
143+
typographic style of the parent element. Customize them with
144+
<code>size</code> prop: <code>lg</code>, <code>sm</code>, or
145+
<code>xs</code>.
146+
</p>
147+
<DocsExample href="components/placeholder#color">
148+
<CPlaceholder :xs="12" size="lg" />
149+
<CPlaceholder :xs="12" />
150+
<CPlaceholder :xs="12" size="sm" />
151+
<CPlaceholder :xs="12" size="xs" />
152+
</DocsExample>
153+
</CCardBody>
154+
</CCard>
155+
<CCard class="mb-4">
156+
<CCardHeader>
157+
<strong>Vue Placeholder</strong> <small> Animation</small>
158+
</CCardHeader>
159+
<CCardBody>
160+
<p>
161+
Animate placeholders with <code>animation="glow"</code> or
162+
<code>animation="wave"</code> to better convey the perception of
163+
something being <em>actively</em> loaded.
164+
</p>
165+
<DocsExample href="components/placeholder#animation">
166+
<CPlaceholder component="p" animation="glow">
167+
<CPlaceholder :xs="12" />
168+
</CPlaceholder>
169+
170+
<CPlaceholder component="p" animation="wave">
171+
<CPlaceholder :xs="12" />
172+
</CPlaceholder>
173+
</DocsExample>
174+
</CCardBody>
175+
</CCard>
176+
</CCol>
177+
</CRow>
178+
</template>
179+
180+
<script>
181+
import VueImg from '@/assets/images/vue.jpg'
182+
export default {
183+
name: 'Placeholders',
184+
setup() {
185+
return {
186+
VueImg,
187+
}
188+
},
189+
}
190+
</script>

0 commit comments

Comments
 (0)