Vueで可変な枠を作る方法
auです。
Vueで開発をしている際に、枠を可変な状態で作れたらいいなーと思って調べてみました。
いい感じのものを見つけたので書いておこうと思います。
Vue Split Panes
これは、ブロックを可変で動かすことができるコンポーネントです。
import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css'
<splitpanes style="height: 100vh" horizontal> <pane min-size="30vh"> <span>1</span> </pane> <pane> <span>2</span> </pane>
.splitpanes__pane { justify-content: center; align-items: center; display: flex; font-weight: bold; border: solid 3px #000000; } .splitpanes__pane span { font-family: Helvetica, Arial, sans-serif; color: #000; font-size: 5em; opacity: 0.6; }
真ん中の境界をマウスオーバーすると、領域の幅をいじることができます。
使えるオプション
horizontal,vertical
html1行目
<splitpanes style="height: 100vh" horizontal>
styleは、cssを直接指定しています。画面いっぱいに表示して欲しいということですね。
その次のhorizontalは、「横に並べる」みたいなイメージです。
virticalを指定すると「縦に並べる」という指定になります。
min-size、max-size、size
これは公式サイトの例をいじった方が理解しやすいと思います。
size: デフォルトのサイズを決めることができます。
min-size: 最小サイズを決めることができます。
max-size: 最大サイズを決めることができます。