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

refactor: change camelCase props to kebab-case

Browse Source
This commit is contained in:
woothu
2019-06-03 15:47:41 +02:00
parent 4ce4b01cae
commit 989220f82a
31 changed files with 420 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Collapses.vue
+2 -128
View File
@@ -18,145 +18,19 @@
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="c-mt-2">
<CCard bodyWrapper>
<CCard body-wrapper>
<p class="c-card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="c-mt-2">
<CCard bodyWrapper>Hello!</CCard>
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
<!-- <CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
<CCollapse id="collapse2">
<CCard>
I am collapsible content!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
<CCollapse visible id="collapse3">
<CCard>
I should start open!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</CCardHeader>
<div>
<CButton @click="showCollapse = !showCollapse"
:class="showCollapse ? 'collapsed' : null"
aria-controls="collapse4"
:aria-expanded="showCollapse ? 'true' : 'false'">
Toggle Collapse
</CButton>
<CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
<CCard>
I should start open!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
<CCollapse id="collapseA" class="mt-2">
<CCard>
I am collapsable content A!
</CCard>
</CCollapse>
<CCollapse id="collapseB" class="mt-2">
<CCard>
I am collapsable content B!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</CCardHeader>
<div role="tablist">
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
</CCardHeader>
<CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<CCardBody>
<p class="card-text">
I start opened because <code>visible</code> is <code>true</code>
</p>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
</CCardHeader>
<CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
</CCardHeader>
<CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
</div>
</CCard>
</CCol> -->
</CRow>
</div>
</div>