見出し画像

Webアプリケーションを公開するまでのつぶやき 3

くろねこ

プロローグは↑こちら。

BottomNavigationBarを作りたい

ぼちぼちドキュメントも読んでますが、平行して実装もしていきたい。
BottomNavigationBarってなんぞって方いますかね。
FlutterでいうところのこういうUIです。

BottomNavigationBar

モバイルアプリだとよくある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>タブ１</p>
      <p>タブ２</p>
      <p>タブ３</p>
      <p>タブ４</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を入れてみたのですが、色を変えることができませんでした。
もうちょっと調べたり、色々試したりしてだめだったら後回しにしようと思います。

あ、そういえば。
つぶやき１で書いたcomponenntの登録方法が分かりました。
つかいたいcomponenntをimportするだけではダメで、

export default defineComponent({
  name: 'BottomTabView',
  components: {
    IconBase,
    HomeIcon,
    MapPinIcon,
    FavoriteIcon,
    MyPageIcon,
  },
  setup(props) {
    
  },
});

こんな感じでcomponenntsに追加する必要があるみたいです。
これはローカルコンポーネントで使用範囲をこのコンポーネント内に限定している登録方法で、グローバルに登録する方法が別であります。
今回の場合はBottomNavigationBar内でしか使わないIcon系のコンポーネントなのでローカルに登録しました。

今回はこの辺で。
また次回、お願い致します。

この記事が気に入ったらサポートをしてみませんか？