mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-15 19:16:33 +08:00
110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="page-row">
|
||
<div class="page-content">
|
||
<section class="mb-24">
|
||
<h1>Collapse</h1>
|
||
<p class="text-dark">
|
||
A content area which can be collapsed and expanded.
|
||
</p>
|
||
</section>
|
||
<a-divider />
|
||
<section class="mb-24">
|
||
<h2>When To Use</h2>
|
||
<ul>
|
||
<li>Can be used to group or hide complex regions to keep the page clean.</li>
|
||
<li>‘Accordion’ is a special kind of ‘Collapse’, which allows only one panel to be expanded at a time.</li>
|
||
</ul>
|
||
</section>
|
||
<h2>Examples</h2>
|
||
<section class="mb-24" id="Basic">
|
||
<a-divider orientation="left">Basic</a-divider>
|
||
<p>
|
||
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
|
||
</p>
|
||
<div class="showcase">
|
||
<a-collapse v-model="activeKey">
|
||
<a-collapse-panel key="1" header="This is panel header 1">
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="3" header="This is panel header 3" disabled>
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</div>
|
||
<muse-snippet :code="codeSample"></muse-snippet>
|
||
</section>
|
||
|
||
<p class="text-right font-semibold mb-24">
|
||
Looking for more Ant Design Vue Collapse? Please check the
|
||
<a target="_blank" href="https://antdv.com/components/collapse/">official docs</a>.
|
||
</p>
|
||
</div>
|
||
<muse-anchor :anchors="anchors"></muse-anchor>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
head () {
|
||
return {
|
||
title: 'Collapse | Muse Vue Ant Design Dashboard @ Creative Tim',
|
||
meta: [
|
||
{ hid: 'description', name: 'description', content: 'A content area which can be collapsed and expanded.' }
|
||
]
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
anchors: {
|
||
"Basic": "Basic",
|
||
},
|
||
text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
|
||
activeKey: ['1'],
|
||
codeSample: `
|
||
<template>
|
||
<div>
|
||
<a-collapse v-model="activeKey">
|
||
<a-collapse-panel key="1" header="This is panel header 1">
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="3" header="This is panel header 3" disabled>
|
||
<p>{{ text }}</p>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
|
||
activeKey: ['1'],
|
||
};
|
||
},
|
||
watch: {
|
||
activeKey(key) {
|
||
console.log(key);
|
||
},
|
||
},
|
||
};
|
||
<\/script>`,
|
||
}
|
||
},
|
||
methods: {
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
</style> |