Vue.jsを使えば、タブ切り替えインターフェースも簡単に実装できます。本記事では、v-forによるタブの自動生成や、アクティブ状態の管理、クリックによる表示切り替えまで、実用的なタブUIの作り方を解説します。
タブ切り替えUIとは?
タブUIとは、複数のコンテンツをタブごとに切り替えて表示するインターフェースのことです。Vue.jsでは、リアクティブな状態とv-forやv-ifなどのテンプレート構文を組み合わせることで、柔軟かつ効率的にタブUIを実装できます。
Vue.jsでのタブ切り替えの実装例
以下は、Vue 3のComposition APIを使ってタブ切り替えを実装した例です。タブの情報は配列で管理し、現在選択されているインデックスをrefでリアクティブに保持します。
<template>
<div class="tab-container">
<ul class="tab-menu">
<li
v-for="(tab, index) in tabs"
:key="index"
:class="{ active: currentTab === index }"
@click="currentTab = index"
>
{{ tab.label }}
</li>
</ul>
<div class="tab-content">
<p>{{ tabs[currentTab].content }}</p>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const tabs = [
{ label: '概要', content: 'これは概要の内容です。' },
{ label: '機能', content: 'ここでは機能について説明します。' },
{ label: 'お問い合わせ', content: 'お問い合わせはこちらから。' }
];
const currentTab = ref(0);
</script>
<style scoped>
.tab-container {
max-width: 600px;
margin: 0 auto;
}
.tab-menu {
display: flex;
list-style: none;
padding: 0;
margin-bottom: 1rem;
border-bottom: 2px solid #ddd;
}
.tab-menu li {
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-menu li.active {
border-color: #007acc;
font-weight: bold;
}
.tab-content {
padding: 1rem;
background: #f9f9f9;
border: 1px solid #ddd;
}
</style>
ポイント解説
tabs
配列にタブのラベルと内容を定義し、v-for
でリストを生成しています。現在選択中のタブはcurrentTab
で管理されており、クリックイベントでインデックスが更新されます。:class
でアクティブタブにスタイルを適用している点も重要です。
応用のヒント
- タブの中身を別コンポーネント化して柔軟に表示
- タブ切り替え時に
<transition>
でアニメーションを追加 - タブ状態をURLクエリやルーティングと連動させる
まとめ
Vue.jsのリアクティブな仕組みを活かせば、状態管理とテンプレート制御だけでタブUIを直感的に構築できます。構造がシンプルなため、規模の小さいUIから拡張性のある大規模なUI設計にも対応できます。ぜひ実プロジェクトでも活用してみてください。