Merge branch 'dev'
This commit is contained in:
Łukasz Holeczek
+5
-1
@@ -70,12 +70,16 @@ export default [
|
||||
name: 'Navs & Tabs',
|
||||
to: '/base/navs',
|
||||
},
|
||||
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Paginations',
|
||||
to: '/base/paginations',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Placeholders',
|
||||
to: '/base/placeholders',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Popovers',
|
||||
|
||||
@@ -84,6 +84,11 @@ const routes = [
|
||||
name: 'Paginations',
|
||||
component: () => import('@/views/base/Paginations.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/placeholders',
|
||||
name: 'Placeholders',
|
||||
component: () => import('@/views/base/Placeholders.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/popovers',
|
||||
name: 'Popovers',
|
||||
|
||||
+4
-24
@@ -100,12 +100,7 @@
|
||||
<CRow>
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-info
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
|
||||
>
|
||||
<div class="text-medium-emphasis small">New Clients</div>
|
||||
<div class="fs-5 fw-semibold">9,123</div>
|
||||
@@ -113,12 +108,7 @@
|
||||
</CCol>
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-danger
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
|
||||
>
|
||||
<div class="text-medium-emphasis small">
|
||||
Recurring Clients
|
||||
@@ -148,12 +138,7 @@
|
||||
<CRow>
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-warning
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
|
||||
>
|
||||
<div class="text-medium-emphasis small">Pageviews</div>
|
||||
<div class="fs-5 fw-semibold">78,623</div>
|
||||
@@ -161,12 +146,7 @@
|
||||
</CCol>
|
||||
<CCol :sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-success
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
|
||||
>
|
||||
<div class="text-medium-emphasis small">Organic</div>
|
||||
<div class="fs-5 fw-semibold">49,123</div>
|
||||
|
||||
@@ -32,6 +32,39 @@
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapse</strong> <small> Horizontal</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
The collapse plugin also supports horizontal collapsing. Add the
|
||||
<code>horizontal</code> property to transition the
|
||||
<code>width</code> instead of <code>height</code> and set a
|
||||
<code>width</code> on the immediate child element.
|
||||
</p>
|
||||
<DocsExample href="components/collapse.html#horizontal">
|
||||
<CButton
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
aria-expanded="{visible}"
|
||||
aria-controls="collapseWidthExample"
|
||||
@click="visibleHorizontal = !visibleHorizontal"
|
||||
>Button</CButton
|
||||
>
|
||||
<div style="min-height: 120px">
|
||||
<CCollapse horizontal :visible="visibleHorizontal">
|
||||
<CCard style="width: 300px">
|
||||
<CCardBody>
|
||||
This is some placeholder content for a horizontal collapse.
|
||||
It's hidden by default and shown when triggered.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapse</strong> <small> multi target</small>
|
||||
@@ -100,10 +133,12 @@ export default {
|
||||
const visible = ref(false)
|
||||
const visibleA = ref(false)
|
||||
const visibleB = ref(false)
|
||||
const visibleHorizontal = ref(false)
|
||||
return {
|
||||
visible,
|
||||
visibleA,
|
||||
visibleB,
|
||||
visibleHorizontal,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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