Webアプリケーションを公開するまでのつぶやき 3
プロローグは↑こちら。
BottomNavigationBarを作りたい
ぼちぼちドキュメントも読んでますが、平行して実装もしていきたい。
BottomNavigationBarってなんぞって方いますかね。
FlutterでいうところのこういうUIです。
モバイルアプリだとよくあるUIだと思います。
これをWebで実装したい。
ここでtailwindCSSの出番ですね。
tailwindCSS
tailwindCssはモバイルファーストなんですって。
↑の記事を見て知りました。
ドキュメント読めよって感じですが、tailwindCSSのドキュメントって英語なんですもの。
日本語で技術ブログ書いてくださってる方、ありがたやー。
cssはここのページに全部まとまっているので使いたいやつを探して使うといいですね。
cssがそもそも苦手かつ慣れていない私はやりたい事を検索してからtailwindで目的のcssを探してってやるので亀の歩みで進めていきます。
とりあえずモバイルファーストということでスマホで見た時のUI優先で作っていきます。
BottomTabViewというコンポーネント
前々回の記事で書いた通り、最初に表示される画面をCommonHeader、BottomTabScreen、BottomTabViewの3つに分けています。
BottomTabView->BottomNavigationBarにリネームしました。
このBottomNavigationBarコンポーネントを今回は作りこんでいきます。
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'BottomTabView',
setup(props) {
},
});
</script>
<template>
<div class="w-full h-16 fixed bottom-0 inset-x-0 bg-current">
<p>タブ</p>
</div>
</template>
とりあえずこう。
これで一番したにずっと張り付いてるViewになりました。
色は分かりやすいように適当につけてます。
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'BottomTabView',
setup(props) {
},
});
</script>
<template>
<div class="w-full h-16 fixed bottom-0 inset-x-0">
<div class="w-full justify-evenly flex bg-slate-200">
<p>タブ1</p>
<p>タブ2</p>
<p>タブ3</p>
<p>タブ4</p>
</div>
</div>
</template>
でもってこう。
pタグが均等に横並びになりました。
このpタグの位置にあるのをIconボタンにしたいんですよねー。
Iconはこちらのを使わせてもらいました。
SVGでダウンロードできるのでSVGを使いたいと思います。
ここを参考にSVG画像をIconとして使えるようにしました。
選択された時に色や大きさを変えたいので編集可能なSVGアイコンとして作成。
↑で紹介されているIconBase.vueはまるっとコピー。
ダウンロードしたSVGファイルをエディタで開いてsvgタグをコピーしてXxxIcon.vueみたいなファイルを作って貼り付け。
<template>
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<g>
<path class="st0" d="M392.859,6.031L123.288,66.938l0.91,1.692l-0.782-0.51L0,256.273l26.488,17.374l4.457-6.804v139.261
l254.107,99.866l209.756-104.105V228.575L512,221.753L392.859,6.031z M270.335,466.165l-91.76-36.065V325.503l-62.872-18.629v98.51
l-53.085-20.866V218.561l78.208-119.232l120.232,221.945l3.856-1.519l5.421-2.147V466.165z M463.136,382.226l-164.858,81.829
V306.52l164.858-65.383V382.226z" style="fill: rgb(75, 75, 75);"></path>
</g>
</svg>
</template>
HomeIcon.vueはこんな感じ。
<script>タグはエラーになるので削除しました。
なぜか落としたSVGそのままコピーだと表示されないのがあるんですが、2行目の<svg>タグの行を上書きすると表示されるようになったのでそれで対応。
SVG詳しくないんで直接の原因は分からないです。
とりあえずうまくいったからいっか。
こんな感じでSVG画像が表示できています。
画像はChromeのデベロッパーモードのPixcel5の画面サイズで表示しています。
これをもっとBottomNavigationBarっぽいUIに加工していきます。
アイコンサイズとpaddingを調整。
配色の参考にはこちらのページを使わせてもらいました。
アイコンの色を変えたいなー。
と思って、iconColorにカラーコードやrgbを入れてみたのですが、色を変えることができませんでした。
もうちょっと調べたり、色々試したりしてだめだったら後回しにしようと思います。
あ、そういえば。
つぶやき1で書いたcomponenntの登録方法が分かりました。
つかいたいcomponenntをimportするだけではダメで、
export default defineComponent({
name: 'BottomTabView',
components: {
IconBase,
HomeIcon,
MapPinIcon,
FavoriteIcon,
MyPageIcon,
},
setup(props) {
},
});
こんな感じでcomponenntsに追加する必要があるみたいです。
これはローカルコンポーネントで使用範囲をこのコンポーネント内に限定している登録方法で、グローバルに登録する方法が別であります。
今回の場合はBottomNavigationBar内でしか使わないIcon系のコンポーネントなのでローカルに登録しました。
今回はこの辺で。
また次回、お願い致します。
この記事が気に入ったらサポートをしてみませんか?