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

feat: add views - in base section

Browse Source
This commit is contained in:
Marcin Michałek
2021-08-04 18:31:45 +02:00
parent 79559ae334
commit 820f491410
31 changed files with 63224 additions and 9380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Collapses.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Collapses</strong>
</CCardHeader>
<CCardBody>
<h4>Toggle</h4>
<Example href="components/collapse.html#example">
<CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
<CButton color="primary" @click="visible = !visible">Button</CButton>
<CCollapse :visible="visible">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</Example>
<h4 class="mt-4">Toggle multiple targets</h4>
<Example href="components/collapse.html#multiple-targets">
<CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
<CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
<CButton color="primary" @click="() => {
visibleA = !visibleA
visibleB = !visibleB
}"
>
Toggle both elements
</CButton>
<CRow>
<CCol xs="6">
<CCollapse :visible="visibleA">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
<CCol xs="6">
<CCollapse :visible="visibleB">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Breadcrumbs",
data() {
return {
visible: false,
visibleA: false,
visibleB: false,
}
}
};
</script>