點燈坊

失くすものさえない今が強くなるチャンスよ

實作 Tab

Sam Xiao's Avatar 2021-09-01

Tab 為實務上常見 UI，可完全使用 Tailwind CSS 實現。

Version

Tailwind CSS 2.2.0

Tab

tab000

上方選擇不同的 tab，下方的 content 會隨之改變。

<template>
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
      <a v-for="tab in tabs" :key="tab.name" class="cursor-pointer" @click="onClick (tab)" :class="[tab.current ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300', 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm']">
        {{ tab.name }}
      </a>
    </nav>
  </div>
  <div v-if="selectedTab === 'iPhone'">
    iPhone
  </div>
  <div v-if="selectedTab === 'iPad'">
    iPad
  </div>
  <div v-if="selectedTab === 'Macbook'">
    Macbook
  </div>
</template>

<script setup>
let selectedTab = $ref ('iPhone')

let tabs = $ref ([
  { name: 'iPhone', current: true },
  { name: 'iPad', current: false },
  { name: 'Macbook', current: false },
])

let onClick = x => {
  tabs.forEach (x => x.current = false)
  x.current = true
  selectedTab = x.name
}
</script>

第 2 行

<div class="border-b border-gray-200">

建立 tab 與 content 之間的隔線。

第 3 行

<nav class="-mb-px flex space-x-8" aria-label="Tabs">

將所有 <a> 包在 <nav> 內。

第 4 行

<a v-for="tab in tabs" :key="tab.name" class="cursor-pointer" @click="onClick (tab)" :class="[tab.current ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300', 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm']">
  {{ tab.name }}
</a>

根據資料顯示所有 tab，並設定 tab 的視覺 style。

第 9 行

<div v-if="selectedTab === 'iPhone'">
  iPhone
</div>

建立每個 tab 所顯示 content。

23 行

let tabs = $ref ([
  { name: 'iPhone', current: true },
  { name: 'iPad', current: false },
  { name: 'Macbook', current: false },
])

建立所有 tab 所綁定的資料。

21 行

let selectedTab = $ref ('iPhone')

儲存目前所選擇的 tab 名稱。

29 行

let onClick = x => {
  tabs.forEach (x => x.current = false)
  x.current = true
  selectedTab = x.name
}

處理 user 選擇 tab 後所發出 event：

  • 將 tabs 所有 current 重置為 false
  • 將目前 current 設定為 true
  • 將目前 tab 的 name 儲存到 selectedTab state

Conclusion

  • Tab 看似很複雜 UI，但事實上可很簡單使用 Tailwind CSS 實現

# TailwindCSS