menu
書いてる野郎
orebike@gmail.com
Vue.js/ファイラーっぽいUIを作ってみる/020_試作
Vue.js/ファイラーっぽいUIを作ってみる/020_試作
ここに完成予想図の HTML を構築する。 前回 Hello を書き込んでいた場所に代わりに以下のようなリスト構造を書き込む。 よくあるファイラーのツリー構造のはこのような構造になっているはずである。
<ul> <li class="folder"> <h2>aaa</h2> <ul> <li class="file">bbb</li> <li class="file">ccc</li> <li class="file">ddd</li> </ul> </li> <li class="file">eee</li> <li class="folder"> <h2>fff</h2> <ul> <li class="file">ggg</li> <li class="folder"> <h2>hhh</h2> <ul> <li class="file">iii</li> <li class="file">jjj</li> </ul> </li> </ul> </li> <li class="file">kkk</li> </ul>
作ったファイルを単にブラウザで開けば確認できる。 階層構造のリストが表示されれば OK
全体
いままでの全部のまとめ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vuex@latest"></script>
</head>
<body>
<div id="app">
<ul>
<li class="folder">
<h2>aaa</h2>
<ul>
<li class="file">bbb</li>
<li class="file">ccc</li>
<li class="file">ddd</li>
</ul>
</li>
<li class="file">eee</li>
<li class="folder">
<h2>fff</h2>
<ul>
<li class="file">ggg</li>
<li class="folder">
<h2>hhh</h2>
<ul>
<li class="file">iii</li>
<li class="file">jjj</li>
</ul>
</li>
</ul>
</li>
<li class="file">kkk</li>
</ul>
</div>
</body>
</html>
