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/Collapses.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<CRow>
<CCol>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can use a link or a button component.
</p>
<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>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong> <small> multi target</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<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>