refactor: update example views
This commit is contained in:
Łukasz Holeczek
@@ -6,6 +6,7 @@ import {
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibGoogle,
|
||||
cibStackoverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
@@ -147,6 +148,7 @@ export const iconsSet = Object.assign(
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibGoogle,
|
||||
cibStackoverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
|
||||
+48
-136
@@ -128,67 +128,13 @@
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0" />
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group mb-4" v-for="item in progressGroupExample1" :key="item.title">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Monday </span>
|
||||
<span class="text-medium-emphasis small">{{item.title}}</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin color="info" :value="34" />
|
||||
<CProgress thin color="danger" :value="78" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Tuesday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="56" color="info" />
|
||||
<CProgress thin :value="94" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Wednesday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="12" color="info" />
|
||||
<CProgress thin :value="67" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Thursday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="43" color="info" />
|
||||
<CProgress thin :value="91" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Friday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="22" color="info" />
|
||||
<CProgress thin :value="73" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Saturday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="53" color="info" />
|
||||
<CProgress thin :value="82" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Sunday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="9" color="info" />
|
||||
<CProgress thin :value="69" color="danger" />
|
||||
<CProgress thin color="info" :value="item.value1" />
|
||||
<CProgress thin color="danger" :value="item.value2" />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
@@ -222,91 +168,30 @@
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0" />
|
||||
<div class="progress-group">
|
||||
<div class="progress-group" v-for="item in progressGroupExample2" :key="item.title">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-user" class="me-2" size="lg" />
|
||||
<span class="title">Male</span>
|
||||
<span class="ms-auto font-weight-bold">43%</span>
|
||||
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
||||
<span class="title">{{item.title}}</span>
|
||||
<span class="ms-auto fw-semibold">{{item.value}}%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="43" color="warning" />
|
||||
<CProgress thin :value="item.value" color="warning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
|
||||
<div class="mb-5"></div>
|
||||
|
||||
<div class="progress-group" v-for="item in progressGroupExample3" :key="item.title">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-user-female" class="me-2" size="lg" />
|
||||
<span class="title">Female</span>
|
||||
<span class="ms-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="37" color="warning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-globe-alt" class="me-2" size="lg" />
|
||||
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
191,235
|
||||
<span class="text-medium-emphasis small">(56%)</span>
|
||||
<span class="ms-auto fw-semibold">
|
||||
{{item.value}}
|
||||
<span class="text-medium-emphasis small">({{item.percent}}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="56" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-facebook"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
51,223
|
||||
<span class="text-medium-emphasis small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="15" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-twitter"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
37,564
|
||||
<span class="text-medium-emphasis small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="11" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-linkedin"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
27,319
|
||||
<span class="text-medium-emphasis small"> (8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="8" color="success" />
|
||||
<CProgress thin :value="item.percent" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
@@ -330,7 +215,7 @@
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow v-for="item in tableItems" :key="item.name">
|
||||
<CTableRow v-for="item in tableExample" :key="item.name">
|
||||
<CTableDataCell class="text-center">
|
||||
<CAvatar
|
||||
size="md"
|
||||
@@ -406,7 +291,31 @@ export default {
|
||||
WidgetsStatsD,
|
||||
},
|
||||
setup() {
|
||||
const tableItems = [
|
||||
const progressGroupExample1 = [
|
||||
{ title: 'Monday', value1: 34, value2: 78 },
|
||||
{ title: 'Tuesday', value1: 56, value2: 94 },
|
||||
{ title: 'Wednesday', value1: 12, value2: 67 },
|
||||
{ title: 'Thursday', value1: 43, value2: 91 },
|
||||
{ title: 'Friday', value1: 22, value2: 73 },
|
||||
{ title: 'Saturday', value1: 53, value2: 82 },
|
||||
{ title: 'Sunday', value1: 9, value2: 69 },
|
||||
]
|
||||
const progressGroupExample2 = [
|
||||
{ title: 'Male', icon: 'cil-user', value: 53 },
|
||||
{ title: 'Female', icon: 'cil-user-female', value: 43 },
|
||||
]
|
||||
const progressGroupExample3 = [
|
||||
{
|
||||
title: 'Organic Search',
|
||||
icon: 'cib-google',
|
||||
percent: 56,
|
||||
value: '191,235',
|
||||
},
|
||||
{ title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
|
||||
{ title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
|
||||
{ title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
|
||||
]
|
||||
const tableExample = [
|
||||
{
|
||||
avatar: { src: avatar1, status: 'success' },
|
||||
user: {
|
||||
@@ -498,7 +407,10 @@ export default {
|
||||
]
|
||||
|
||||
return {
|
||||
tableItems,
|
||||
tableExample,
|
||||
progressGroupExample1,
|
||||
progressGroupExample2,
|
||||
progressGroupExample3,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
+132
-159
@@ -14,86 +14,47 @@
|
||||
</p>
|
||||
<DocsExample href="components/accordion">
|
||||
<CAccordion>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 1"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 1 ? (activeKey = 0) : (activeKey = 1)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #1
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 1">
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionItem :itemKey="1">
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 2"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 2 ? (activeKey = 0) : (activeKey = 2)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #2
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 2">
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong>
|
||||
It is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionItem :itemKey="2">
|
||||
<CAccordionHeader> Accordion Item #2 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 3"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 3 ? (activeKey = 0) : (activeKey = 3)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #3
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 3">
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionItem :itemKey="3">
|
||||
<CAccordionHeader> Accordion Item #3 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
@@ -113,91 +74,103 @@
|
||||
<DocsExample href="components/accordion#flush">
|
||||
<CAccordion flush>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 1"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 1
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 1)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #1
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 1">
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 2"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 2
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 2)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #2
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 2">
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong>
|
||||
It is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionHeader> Accordion Item #2 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 3"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 3
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 3)
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #3
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 3">
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
<CAccordionHeader> Accordion Item #3 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Accordion</strong> <small>Always open</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>alwaysOpen</code> property to make accordion items stay
|
||||
open when another item is opened.
|
||||
</p>
|
||||
<DocsExample href="components/accordion#always-open">
|
||||
<CAccordion :activeItemKey="2" alwaysOpen>
|
||||
<CAccordionItem :itemKey="1">
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem :itemKey="2">
|
||||
<CAccordionHeader> Accordion Item #2 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem :itemKey="3">
|
||||
<CAccordionHeader> Accordion Item #3 </CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the showing
|
||||
and hiding via CSS transitions. You can modify any of this
|
||||
with custom CSS or overriding our default variables. It's also
|
||||
worth noting that just about any HTML can go within the
|
||||
<code>.accordion-body</code>, though the transition does limit
|
||||
overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
>
|
||||
<CModal
|
||||
:visible="visibleLiveDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleLiveDemo = false
|
||||
}
|
||||
@@ -67,7 +67,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleLiveDemo = false
|
||||
}
|
||||
@@ -121,7 +121,7 @@
|
||||
<CModal
|
||||
backdrop="static"
|
||||
:visible="visibleStaticBackdropDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleStaticBackdropDemo = false
|
||||
}
|
||||
@@ -129,7 +129,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleStaticBackdropDemo = false
|
||||
}
|
||||
@@ -182,7 +182,7 @@
|
||||
>
|
||||
<CModal
|
||||
:visible="visibleScrollingLongContentDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleScrollingLongContentDemo = false
|
||||
}
|
||||
@@ -190,7 +190,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleScrollingLongContentDemo = false
|
||||
}
|
||||
@@ -316,7 +316,7 @@
|
||||
<CModal
|
||||
scrollable
|
||||
:visible="visibleScrollableDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleScrollableDemo = false
|
||||
}
|
||||
@@ -324,7 +324,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleScrollableDemo = false
|
||||
}
|
||||
@@ -458,7 +458,7 @@
|
||||
<CModal
|
||||
alignment="center"
|
||||
:visible="visibleVerticallyCenteredDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleVerticallyCenteredDemo = false
|
||||
}
|
||||
@@ -466,7 +466,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleVerticallyCenteredDemo = false
|
||||
}
|
||||
@@ -509,7 +509,7 @@
|
||||
alignment="center"
|
||||
scrollable
|
||||
:visible="visibleVerticallyCenteredScrollableDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleVerticallyCenteredScrollableDemo = false
|
||||
}
|
||||
@@ -517,7 +517,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
visibleVerticallyCenteredScrollableDemo = false
|
||||
}
|
||||
@@ -572,7 +572,7 @@
|
||||
>
|
||||
<CModal
|
||||
:visible="tooltipsAndPopoversDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
tooltipsAndPopoversDemo = false
|
||||
}
|
||||
@@ -580,7 +580,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
tooltipsAndPopoversDemo = false
|
||||
}
|
||||
@@ -715,7 +715,7 @@
|
||||
<CModal
|
||||
size="xl"
|
||||
:visible="xlDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
xlDemo = false
|
||||
}
|
||||
@@ -723,7 +723,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
xlDemo = false
|
||||
}
|
||||
@@ -736,7 +736,7 @@
|
||||
<CModal
|
||||
size="lg"
|
||||
:visible="lgDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
lgDemo = false
|
||||
}
|
||||
@@ -744,7 +744,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
lgDemo = false
|
||||
}
|
||||
@@ -757,7 +757,7 @@
|
||||
<CModal
|
||||
size="sm"
|
||||
:visible="smDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
smDemo = false
|
||||
}
|
||||
@@ -765,7 +765,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
smDemo = false
|
||||
}
|
||||
@@ -893,7 +893,7 @@
|
||||
<CModal
|
||||
fullscreen
|
||||
:visible="fullscreenDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenDemo = false
|
||||
}
|
||||
@@ -901,7 +901,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
xlDemo = false
|
||||
}
|
||||
@@ -914,7 +914,7 @@
|
||||
<CModal
|
||||
fullscreen="sm"
|
||||
:visible="fullscreenSmDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenSmDemo = false
|
||||
}
|
||||
@@ -922,7 +922,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenSmDemo = false
|
||||
}
|
||||
@@ -935,7 +935,7 @@
|
||||
<CModal
|
||||
fullscreen="md"
|
||||
:visible="fullscreenMdDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenMdDemo = false
|
||||
}
|
||||
@@ -943,7 +943,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenMdDemo = false
|
||||
}
|
||||
@@ -956,7 +956,7 @@
|
||||
<CModal
|
||||
fullscreen="lg"
|
||||
:visible="fullscreenLgDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenLgDemo = false
|
||||
}
|
||||
@@ -964,7 +964,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenLgDemo = false
|
||||
}
|
||||
@@ -977,7 +977,7 @@
|
||||
<CModal
|
||||
fullscreen="xl"
|
||||
:visible="fullscreenXlDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenXlDemo = false
|
||||
}
|
||||
@@ -985,7 +985,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenXlDemo = false
|
||||
}
|
||||
@@ -998,7 +998,7 @@
|
||||
<CModal
|
||||
fullscreen="xxl"
|
||||
:visible="fullscreenXxlDemo"
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenXxlDemo = false
|
||||
}
|
||||
@@ -1006,7 +1006,7 @@
|
||||
>
|
||||
<CModalHeader
|
||||
dismiss
|
||||
@dismiss="
|
||||
@close="
|
||||
() => {
|
||||
fullscreenXxlDemo = false
|
||||
}
|
||||
|
||||
@@ -289,7 +289,7 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
class="fw-semibold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
@@ -311,7 +311,7 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
class="fw-semibold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
@@ -333,7 +333,7 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
class="fw-semibold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
@@ -355,7 +355,7 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
class="fw-semibold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
|
||||
Reference in New Issue
Block a user