作成するものは、こちらです。
See the Pen Vuetify Example Pen by muuuuminn (@muuuuminn-the-styleful) on CodePen.
※Vuetifyの導入方法などは記載しておりません！
- 今回の登場人物
- v-expansion-panel
- v-form
- v-card
1. v-expansion-panelでパカパカ開閉するのをつくる
vue
<div id="app">
<v-app>
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header>
<div>押してね</div>
</template>
<p>中身</p>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
},
computed: {
}
})
</script>
2. 開閉に応じて表示されるメッセージを変える
vue
<div id="app">
<v-app>
<v-expansion-panel expand v-model="isExpand">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ expandMessage }}</div>
</template>
<p>中身</p>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
isExpand: [], // 対象が一つであっても配列にする。
},
computed: {
expandMessage() {
return this.isExpand[0] ? '閉じる' : '開く';
// 開いている:true、閉じている:false
},
}
})
</script>
3. v-expansion-panel内にv-formを入れる
vue
<div id="app">
<v-app>
<v-expansion-panel expand v-model="isExpand">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ expandMessage }}</div>
</template>
<v-form>
<v-textarea label="テキストエリア" readonly></v-textarea>
<v-textarea label="テキストエリア" outline></v-textarea>
<v-btn class="primary" >投稿</v-btn>
<v-btn class="accent">クリア</v-btn>
</v-form>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
isExpand: [],
},
computed: {
expandMessage() {
return this.isExpand[0] ? '閉じる' : '開く';
},
}
})
</script>
4. v-card系を使って綺麗にする
vue
<div id="app">
<v-app>
<v-card width="90vw">
<v-card-title class="primary">
<div class="white--text">投稿フォーム</div>
</v-card-title>
<v-expansion-panel expand v-model="isExpand">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ expandMessage }}</div>
</template>
<v-card-text>
<v-form>
<v-textarea label="テキストエリア" readonly></v-textarea>
<v-textarea label="テキストエリア" outline></v-textarea>
<v-btn class="primary" >投稿</v-btn>
<v-btn class="accent">クリア</v-btn>
</v-form>
</v-card-text>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
isExpand: [],
},
computed: {
expandMessage() {
return this.isExpand[0] ? '閉じる' : '開く';
},
}
})
</script>
ここまでで冒頭のものが出来上がります。
おまけ：パカパカするのを複数つくる。
vue
<div id="app">
<v-app>
<v-card width="90vw">
<v-card-title class="primary">
<div class="white--text">投稿フォーム</div>
</v-card-title>
<v-expansion-panel expand v-model="isExpand">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ expandMessage1 }}</div>
</template>
<v-card-text>
一個目
</v-card-text>
</v-expansion-panel-content>
<v-expansion-panel-content>
<template v-slot:header>
{{ expandMessage2 }}
</template>
<v-card-text>
二個目
</v-card-text>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
isExpand: [],
},
computed: {
expandMessage1() {
return this.isExpand[0] ? '閉じる' : '開く';
},
expandMessage2() {
return this.isExpand[1] ? '閉じる' : '開く';
},
}
})
</script>
最後に
中身はフォームではなくてもよくて、使い方は様々です。