refactor: update images
This commit is contained in:
Łukasz Holeczek
@@ -388,12 +388,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import avatar1 from './../assets/images/avatars/1.jpg'
|
||||
import avatar2 from './../assets/images/avatars/2.jpg'
|
||||
import avatar3 from './../assets/images/avatars/3.jpg'
|
||||
import avatar4 from './../assets/images/avatars/4.jpg'
|
||||
import avatar5 from './../assets/images/avatars/5.jpg'
|
||||
import avatar6 from './../assets/images/avatars/6.jpg'
|
||||
import avatar1 from '@/assets/images/avatars/1.jpg'
|
||||
import avatar2 from '@/assets/images/avatars/2.jpg'
|
||||
import avatar3 from '@/assets/images/avatars/3.jpg'
|
||||
import avatar4 from '@/assets/images/avatars/4.jpg'
|
||||
import avatar5 from '@/assets/images/avatars/5.jpg'
|
||||
import avatar6 from '@/assets/images/avatars/6.jpg'
|
||||
import MainChartExample from './charts/MainChartExample'
|
||||
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
|
||||
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
|
||||
|
||||
+67
-369
@@ -28,24 +28,7 @@
|
||||
</p>
|
||||
<DocsExample href="components/card">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -127,24 +110,7 @@
|
||||
</p>
|
||||
<DocsExample href="components/card/#images">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up
|
||||
@@ -214,24 +180,7 @@
|
||||
</p>
|
||||
<DocsExample href="components/card/#kitchen-sink">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -544,24 +493,7 @@
|
||||
<CRow>
|
||||
<CCol :lg="6">
|
||||
<CCard class="mb-3">
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -592,24 +524,7 @@
|
||||
>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="bottom"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="bottom" :src="VueImg" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
@@ -633,28 +548,42 @@
|
||||
</p>
|
||||
<DocsExample href="components/card/#background-and-color">
|
||||
<CRow>
|
||||
{[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
|
||||
textColor: 'white' }, { color: 'success', textColor: 'white' }, {
|
||||
color: 'danger', textColor: 'white' }, { color: 'warning' }, {
|
||||
color: 'info', textColor: 'white' }, { color: 'light' }, { color:
|
||||
'dark', textColor: 'white' }, ].map((item, index) => (
|
||||
<CCol :lg="4" key="{index}">
|
||||
<CCard
|
||||
color="{item.color}"
|
||||
textColor="{item.textColor}"
|
||||
class="mb-3"
|
||||
>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} 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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
))}
|
||||
<template
|
||||
v-for="item in [
|
||||
{ color: 'primary', textColor: 'white' },
|
||||
{ color: 'secondary', textColor: 'white' },
|
||||
{ color: 'success', textColor: 'white' },
|
||||
{
|
||||
color: 'danger',
|
||||
textColor: 'white',
|
||||
},
|
||||
{ color: 'warning' },
|
||||
{
|
||||
color: 'info',
|
||||
textColor: 'white',
|
||||
},
|
||||
{ color: 'light' },
|
||||
{ color: 'dark', textColor: 'white' },
|
||||
]"
|
||||
:key="item"
|
||||
>
|
||||
<CCol :lg="4">
|
||||
<CCard
|
||||
class="mb-3"
|
||||
:color="item.color"
|
||||
:textColor="item.textColor"
|
||||
>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{ item.color }} 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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<h3>Border</h3>
|
||||
@@ -680,6 +609,7 @@
|
||||
{ color: 'light' },
|
||||
{ color: 'dark' },
|
||||
]"
|
||||
:key="item"
|
||||
>
|
||||
<CCard
|
||||
:textColor="item.textColor"
|
||||
@@ -758,24 +688,7 @@
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -791,24 +704,7 @@
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -823,24 +719,7 @@
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -864,24 +743,7 @@
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -897,24 +759,7 @@
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -929,24 +774,7 @@
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -975,38 +803,21 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Use the <code>CRow</code> component and set
|
||||
<code
|
||||
>{xs|sm|md|lg|xl|xxl}={{ cols: *
|
||||
}}</code
|
||||
>{xs|sm|md|lg|xl|xxl}="{ cols: *
|
||||
}"</code
|
||||
>
|
||||
property to control how many grid columns (wrapped around your
|
||||
cards) you show per row. For example, here's
|
||||
<code>xs={{cols: 1}}</code> laying out the cards
|
||||
<code>xs="{cols: 1}"</code> laying out the cards
|
||||
on one column, and
|
||||
<code>md={{cols: 1}}</code> splitting four cards
|
||||
<code>md="{cols: 1}"</code> splitting four cards
|
||||
to equal width across multiple rows, from the medium breakpoint up.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1024,24 +835,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1059,24 +853,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1094,24 +871,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1130,31 +890,14 @@
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<p class="text-medium-emphasis small">
|
||||
Change it to <code>md={{ cols: 3}}</code> and
|
||||
Change it to <code>md="{ cols: 3}"</code> and
|
||||
you'll see the fourth card wrap.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1172,24 +915,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1207,24 +933,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1242,24 +951,7 @@
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
class="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@@ -1284,7 +976,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueImg from '@/assets/images/vue.jpg'
|
||||
export default {
|
||||
name: 'Cards',
|
||||
setup() {
|
||||
return {
|
||||
VueImg,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -17,21 +17,21 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
@@ -53,21 +53,21 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
@@ -89,21 +89,21 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
@@ -131,7 +131,7 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
@@ -144,7 +144,7 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
@@ -157,7 +157,7 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
@@ -185,21 +185,21 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
@@ -225,21 +225,21 @@
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
:src="VueImg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
:src="ReactImg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
:src="AngularImg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
@@ -252,7 +252,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AngularImg from '@/assets/images/angular.jpg'
|
||||
import ReactImg from '@/assets/images/react.jpg'
|
||||
import VueImg from '@/assets/images/vue.jpg'
|
||||
export default {
|
||||
name: 'Carousels',
|
||||
setup() {
|
||||
return {
|
||||
AngularImg,
|
||||
ReactImg,
|
||||
VueImg,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user