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

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-26 17:41:07 +02:00
parent 4bd77fc24d b61206112f
commit c7f687982d
96 changed files with 12979 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Accordion.vue
+224
View File
@@ -0,0 +1,224 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Accordion</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<Example 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>
<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>
<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>
</CAccordion>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Accordion</strong> <small>Flush</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>flush</code> to remove the default
<code>background-color</code>, some borders, and some rounded
corners to render accordions edge-to-edge with their parent
container.
</p>
<Example 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>
</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>
</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>
</CAccordionItem>
</CAccordion>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { ref } from 'vue'
export default {
name: "Accordion",
setup() {
const activeKey = ref(1)
const flushActiveKey = ref(1)
return {
activeKey,
flushActiveKey,
}
}
};
</script>