auの日記

プログラミング初心者の日記。(auはハンドルネームです)

Vueで可変な枠を作る方法

auです。

Vueで開発をしている際に、枠を可変な状態で作れたらいいなーと思って調べてみました。

いい感じのものを見つけたので書いておこうと思います。

Vue Split Panes

これは、ブロックを可変で動かすことができるコンポーネントです。

antoniandre.github.io

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;
}

f:id:program-shoshinsya:20200523233727p:plain

真ん中の境界をマウスオーバーすると、領域の幅をいじることができます。

使えるオプション

horizontal,vertical

html1行目

<splitpanes style="height: 100vh" horizontal>

styleは、cssを直接指定しています。画面いっぱいに表示して欲しいということですね。

その次のhorizontalは、「横に並べる」みたいなイメージです。
virticalを指定すると「縦に並べる」という指定になります。

f:id:program-shoshinsya:20200523234210p:plain

min-size、max-size、size

これは公式サイトの例をいじった方が理解しやすいと思います。

size: デフォルトのサイズを決めることができます。
min-size: 最小サイズを決めることができます。
max-size: 最大サイズを決めることができます。