Zenn
🎃

UIデザイン実装便利帳〜Vue編 No1 シンプルなタブの作り方

2023/07/20に公開
Vue.js
Tailwind CSS
UI
uiデザイン実装便利帳
vue編
tech

No1 シンプルなタブの作り方

Vue

Vue
<template>
  <div id="app">
    <div class="containter m-5">
      <ul class="flex justify-center gap-1">
        <li
          v-for="tab in tabs"
          :key="tab.id"
          :class="{select: current === tab.id}"
          class="flex-1 bg-teal-500 text-white rounded-t py-2 text-center cursor-pointer"
          @click="selected(tab.id)"
        >{{ tab.title }}
        </li>
      </ul>
      <div v-show="current === 1" class="w-full px-5 py-3 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab1</h1>
        <p class="pb-1">
          超弦理論が登場する以前に最も小さなスケールを記述した理論は場の量子論である。そこでは粒子を点、すなわち点粒子として扱ってきた（局所場の理論に代わる、広がりを持った粒子の概念を導入したS行列理論や非局所場理論などもあった）。一方、超弦理論では粒子を弦の振動として表す。
        </p>
      </div>
      <div v-show="current === 2" class="w-full p-4 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab2</h1>
        <p class="pb-1">
          1960年代、イタリアの物理学者、ガブリエーレ・ヴェネツィアーノが核子の内部で働く強い力の性質をベータ関数で表し、その式の示す構造が「弦 (string)」によって記述されることに南部陽一郎、レオナルド・サスキンド、ホルガー・ベック・ニールセンらが気付いたことから始まる。弦には「閉じた弦」と「開いた弦」の2種類を考えることができ、開いた弦はスピン1のゲージ粒子（光子、ウィークボソン、グルーオンなどに相当）を含み、閉じた弦はスピン2の重力子を含む。
        </p>
      </div>
      <div v-show="current === 3" class="w-full p-4 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab3</h1>
        <p class="pb-1">
          開いた弦の相互作用を考えるとどうしても閉じた弦、すなわち重力子を含まざるを得ない。そのため、強い力のみを記述する理論と捉えることは難しいことが分かった。逆に言えば、弦を基本要素と考えることで、自然に重力を量子化したものが得られると考えられる。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      tabs: [
        { id: 1, title: 'tab1' },
        { id: 2, title: 'tab2' },
        { id: 3, title: 'tab3' },
      ]
    };
  },
  methods: {
    selected(id) {
      this.current = id;
    }
  }
};
</script>

<style>
  .select {
    color: rgb(20 184 166);
    background-color: white;
    border: 1px solid rgb(20 184 166)
  }
</style>

作り方手順

1. dataにcurrentとtabsを、methodsにselectedを用意

Vue(script)
<script>
export default {
  data() {
    return {
      current: 1,
      tabs: [
        { id: 1, title: 'tab1' },
        { id: 2, title: 'tab2' },
        { id: 3, title: 'tab3' },
      ]
    };
  },
  methods: {
    selected(id) {
      this.current = id;
    }
  }
};
</script>

2. li要素にv-forでtabs要素を表示できるようにし{{ tab.title }}を挿入

3. @click="selected(tab.id)"でタブの切り替えを適用

4. styleにカレント時のクラス.selectを用意、li要素にbind:class="{select: current === tab.id}"

5. タブの中身を用意しv-showで表示条件を設定

Vue(template)
<template>
  <div id="app">
    <div class="containter m-5">
      <ul class="flex justify-center gap-1">
        <li
          v-for="tab in tabs"
          :key="tab.id"
          :class="{select: current === tab.id}"
          class="flex-1 bg-teal-500 text-white rounded-t py-2 text-center cursor-pointer"
          @click="selected(tab.id)"
        >{{ tab.title }}
        </li>
      </ul>
      <div v-show="current === 1" class="w-full px-5 py-3 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab1</h1>
        <p class="pb-1">
          超弦理論が登場する以前に最も小さなスケールを記述した理論は場の量子論である。そこでは粒子を点、すなわち点粒子として扱ってきた（局所場の理論に代わる、広がりを持った粒子の概念を導入したS行列理論や非局所場理論などもあった）。一方、超弦理論では粒子を弦の振動として表す。
        </p>
      </div>
      <div v-show="current === 2" class="w-full p-4 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab2</h1>
        <p class="pb-1">
          1960年代、イタリアの物理学者、ガブリエーレ・ヴェネツィアーノが核子の内部で働く強い力の性質をベータ関数で表し、その式の示す構造が「弦 (string)」によって記述されることに南部陽一郎、レオナルド・サスキンド、ホルガー・ベック・ニールセンらが気付いたことから始まる。弦には「閉じた弦」と「開いた弦」の2種類を考えることができ、開いた弦はスピン1のゲージ粒子（光子、ウィークボソン、グルーオンなどに相当）を含み、閉じた弦はスピン2の重力子を含む。
        </p>
      </div>
      <div v-show="current === 3" class="w-full p-4 bg-slate-100 rounded-b">
        <h1 class="text-2xl font-medium text-teal-500">tab3</h1>
        <p class="pb-1">
          開いた弦の相互作用を考えるとどうしても閉じた弦、すなわち重力子を含まざるを得ない。そのため、強い力のみを記述する理論と捉えることは難しいことが分かった。逆に言えば、弦を基本要素と考えることで、自然に重力を量子化したものが得られると考えられる。
        </p>
      </div>
    </div>
  </div>
</template>
Vue(style)
<style>
  .select {
    color: rgb(20 184 166);
    background-color: white;
    border: 1px solid rgb(20 184 166)
  }
</style>

Discussion