feat: add CPlaceholder component
This commit is contained in:
Łukasz Holeczek
+5
-1
@@ -70,12 +70,16 @@ export default [
|
|||||||
name: 'Navs & Tabs',
|
name: 'Navs & Tabs',
|
||||||
to: '/base/navs',
|
to: '/base/navs',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
component: 'CNavItem',
|
component: 'CNavItem',
|
||||||
name: 'Paginations',
|
name: 'Paginations',
|
||||||
to: '/base/paginations',
|
to: '/base/paginations',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
component: 'CNavItem',
|
||||||
|
name: 'Placeholders',
|
||||||
|
to: '/base/placeholders',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: 'CNavItem',
|
component: 'CNavItem',
|
||||||
name: 'Popovers',
|
name: 'Popovers',
|
||||||
|
|||||||
@@ -84,6 +84,11 @@ const routes = [
|
|||||||
name: 'Paginations',
|
name: 'Paginations',
|
||||||
component: () => import('@/views/base/Paginations.vue'),
|
component: () => import('@/views/base/Paginations.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/base/placeholders',
|
||||||
|
name: 'Placeholders',
|
||||||
|
component: () => import('@/views/base/Placeholders.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/base/popovers',
|
path: '/base/popovers',
|
||||||
name: 'Popovers',
|
name: 'Popovers',
|
||||||
|
|||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<CRow>
|
||||||
|
<CCol :xs="12">
|
||||||
|
<DocsCallout name="Placeholder" href="components/placeholder" />
|
||||||
|
</CCol>
|
||||||
|
<CCol :xs="12">
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p class="text-medium-emphasis small">
|
||||||
|
In the example below, we take a typical card component and recreate
|
||||||
|
it with placeholders applied to create a "loading card". Size and
|
||||||
|
proportions are the same between the two.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder">
|
||||||
|
<div class="d-flex justify-content-around">
|
||||||
|
<CCard style="width: 18rem">
|
||||||
|
<CCardImage orientation="top" :src="VueImg" />
|
||||||
|
<CCardBody>
|
||||||
|
<CCardTitle>Card title</CCardTitle>
|
||||||
|
<CCardText>
|
||||||
|
Some quick example text to build on the card title and make
|
||||||
|
up the bulk of the card's content.
|
||||||
|
</CCardText>
|
||||||
|
<CButton color="primary" href="#">Go somewhere</CButton>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard style="width: 18rem">
|
||||||
|
<CCardImage
|
||||||
|
component="svg"
|
||||||
|
orientation="top"
|
||||||
|
width="100%"
|
||||||
|
height="162"
|
||||||
|
role="img"
|
||||||
|
aria-label="Placeholder"
|
||||||
|
preserveAspectRatio="xMidYMid slice"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<title>Placeholder</title
|
||||||
|
><rect width="100%" height="100%" fill="#868e96"></rect>
|
||||||
|
</CCardImage>
|
||||||
|
<CCardBody>
|
||||||
|
<CCardTitle v-c-placeholder="{ animation: 'glow', xs: 7 }">
|
||||||
|
<CPlaceholder :xs="6" />
|
||||||
|
</CCardTitle>
|
||||||
|
<CCardText v-c-placeholder="{ animation: 'glow' }">
|
||||||
|
<CPlaceholder :xs="7" />
|
||||||
|
<CPlaceholder :xs="4" />
|
||||||
|
<CPlaceholder :xs="4" />
|
||||||
|
<CPlaceholder :xs="6" />
|
||||||
|
<CPlaceholder :xs="8" />
|
||||||
|
</CCardText>
|
||||||
|
<CButton
|
||||||
|
v-c-placeholder="{ xs: 6 }"
|
||||||
|
color="primary"
|
||||||
|
aria-hidden="true"
|
||||||
|
disabled
|
||||||
|
href="#"
|
||||||
|
tabindex="-1"
|
||||||
|
></CButton>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</div>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p>
|
||||||
|
Create placeholders with the
|
||||||
|
<code><CPlaceholder></code> component and a grid column propx
|
||||||
|
(e.g., <code>:xs="6"</code>) to set the <code>width</code>. They can
|
||||||
|
replace the text inside an element or be added as a modifier class
|
||||||
|
to an existing component.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder">
|
||||||
|
<p aria-hidden="true">
|
||||||
|
<CPlaceholder :xs="6" />
|
||||||
|
</p>
|
||||||
|
<CButton
|
||||||
|
v-c-placeholder="{ xs: 4 }"
|
||||||
|
color="primary"
|
||||||
|
aria-hidden="true"
|
||||||
|
disabled
|
||||||
|
href="#"
|
||||||
|
tabindex="-1"
|
||||||
|
></CButton>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong> <small> Width</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p>
|
||||||
|
You can change the <code>width</code> through grid column classes,
|
||||||
|
width utilities, or inline styles.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#width">
|
||||||
|
<CPlaceholder :xs="6" />
|
||||||
|
<CPlaceholder class="w-75" />
|
||||||
|
<CPlaceholder style="width: 30%" />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong> <small> Color</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p>
|
||||||
|
By default, the <code><CPlaceholder></code> uses
|
||||||
|
<code>currentColor</code>. This can be overridden with a custom
|
||||||
|
color or utility class.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#color">
|
||||||
|
<CPlaceholder :xs="12" />
|
||||||
|
|
||||||
|
<CPlaceholder color="primary" :xs="12" />
|
||||||
|
<CPlaceholder color="secondary" :xs="12" />
|
||||||
|
<CPlaceholder color="success" :xs="12" />
|
||||||
|
<CPlaceholder color="danger" :xs="12" />
|
||||||
|
<CPlaceholder color="warning" :xs="12" />
|
||||||
|
<CPlaceholder color="info" :xs="12" />
|
||||||
|
<CPlaceholder color="light" :xs="12" />
|
||||||
|
<CPlaceholder color="dark" :xs="12" />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong> <small> Sizing</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p>
|
||||||
|
The size of <code><CPlaceholder></code>s are based on the
|
||||||
|
typographic style of the parent element. Customize them with
|
||||||
|
<code>size</code> prop: <code>lg</code>, <code>sm</code>, or
|
||||||
|
<code>xs</code>.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#color">
|
||||||
|
<CPlaceholder :xs="12" size="lg" />
|
||||||
|
<CPlaceholder :xs="12" />
|
||||||
|
<CPlaceholder :xs="12" size="sm" />
|
||||||
|
<CPlaceholder :xs="12" size="xs" />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard class="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Vue Placeholder</strong> <small> Animation</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p>
|
||||||
|
Animate placeholders with <code>animation="glow"</code> or
|
||||||
|
<code>animation="wave"</code> to better convey the perception of
|
||||||
|
something being <em>actively</em> loaded.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#animation">
|
||||||
|
<CPlaceholder component="p" animation="glow">
|
||||||
|
<CPlaceholder :xs="12" />
|
||||||
|
</CPlaceholder>
|
||||||
|
|
||||||
|
<CPlaceholder component="p" animation="wave">
|
||||||
|
<CPlaceholder :xs="12" />
|
||||||
|
</CPlaceholder>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import VueImg from '@/assets/images/vue.jpg'
|
||||||
|
export default {
|
||||||
|
name: 'Placeholders',
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
VueImg,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user