sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-10-11 12:54:18 +02:00
parent aaafb7a2bb
commit dbe35e8cc2
5 changed files with 218 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Accordion.vue
+132 -159
View File
@@ -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>