TORICOインターン生のブログです。会社で起きたことについて情報発信していきます。

インターン15、16日目 #Vue.jsでタブ切り替え

こんにちは!

前回ブログを書く時間がなかったので、今回まとめて更新します!


現在、スキマオリジナルページに「全て」「連載」「完結」の3つのタブを作り、切り替えを行う機能を作っています。

前回は、Vue.jsでタブ切り替えができるようにしたところまで進みました!


連載中の作品のデータと完結の作品のデータを取ってきて、if文で条件分岐させるのがとても苦戦しました。

やっぱりVue.jsは難しい…😅



そして、今日は、タブのデザインを考えました!

調べてみたんですが、吹き出し風のタブやインデックス風のタブ、下線のみのタブなど色々あるんですね!


今回は、吹き出し風のデザインに挑戦してみました!

作るのは意外と簡単だったのですが、色や枠をどうするかでかなり悩みました笑

全てボーダーで囲ってみたり、下線だけつけてみたり・・・


いろいろやってみた結果、タブをリストで作っていたのでそれぞれをボーダーで囲んだデザインが一番しっくりきました!!!


吹き出しなので漫画っぽさも出て、可愛い感じにすることができました😊



今回、タブのデザインでもたくさん種類があることを知ったので、他の機能のデザインも調べてみようと思います!


Currently unrated

コメント

コメントを投稿
コメントするには TORICO-ID にログインしてください。
ログイン コメント利用規約