JavaScript
Vue.js
Vuetify

Vuetifyで開閉するフォームの見た目だけを作っていく。

作成するものは、こちらです。



See the Pen

Vuetify Example Pen
by muuuuminn (@muuuuminn-the-styleful)

on CodePen.


※Vuetifyの導入方法などは記載しておりません!


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>



最後に

中身はフォームではなくてもよくて、使い方は様々です。