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