KvcTab / KvcTabPane

タブコンポーネントです。複数のコンテンツをタブで切り替えて表示できます。

ライブデモ

基本的な使い方

<template>
  <kvc-tab v-model="activeTab">
    <kvc-tab-pane name="tab1" label="タブ1">
      <p>タブ1の内容</p>
    </kvc-tab-pane>
    <kvc-tab-pane name="tab2" label="タブ2">
      <p>タブ2の内容</p>
    </kvc-tab-pane>
    <kvc-tab-pane name="tab3" label="タブ3">
      <p>タブ3の内容</p>
    </kvc-tab-pane>
  </kvc-tab>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('tab1')
</script>

KvcTab プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	-	アクティブなタブのname（v-model）
small	`boolean`	`false`	smallサイズで表示
width	`string \| number`	-	タブコンテンツの最小幅
height	`string \| number`	-	タブコンテンツの最小高さ

KvcTab イベント

イベント名	ペイロード	説明
update:modelValue	`string`	アクティブなタブが変更されたときに発火

KvcTabPane プロパティ

プロパティ	型	デフォルト	説明
name	`string`	-	タブの識別名（必須）
label	`string`	-	タブのラベル（必須）

スロット

KvcTab

スロット名	説明
default	KvcTabPaneコンポーネントを配置

KvcTabPane

スロット名	説明
default	タブの内容を配置するデフォルトスロット

使用例

基本的な使用

<template>
  <kvc-tab v-model="currentTab">
    <kvc-tab-pane name="profile" label="プロフィール">
      <kvc-wrap>
        <kvc-field label="名前">
          <kvc-text-input v-model="profile.name" />
        </kvc-field>
        <kvc-field label="メールアドレス">
          <kvc-text-input v-model="profile.email" type="email" />
        </kvc-field>
      </kvc-wrap>
    </kvc-tab-pane>

    <kvc-tab-pane name="settings" label="設定">
      <kvc-wrap>
        <kvc-field label="言語">
          <kvc-dropdown v-model="settings.language" :items="languages" />
        </kvc-field>
        <kvc-field label="通知">
          <kvc-checkbox v-model="settings.notifications" :items="notificationOptions" />
        </kvc-field>
      </kvc-wrap>
    </kvc-tab-pane>

    <kvc-tab-pane name="privacy" label="プライバシー">
      <kvc-wrap>
        <kvc-field label="プロフィール公開">
          <kvc-radio v-model="privacy.visibility" :items="visibilityOptions" />
        </kvc-field>
      </kvc-wrap>
    </kvc-tab-pane>
  </kvc-tab>
</template>

<script setup>
import { ref } from 'vue'

const currentTab = ref('profile')

const profile = ref({
  name: '',
  email: ''
})

const settings = ref({
  language: 'ja',
  notifications: []
})

const privacy = ref({
  visibility: 'public'
})

const languages = ref([
  { label: '日本語', value: 'ja' },
  { label: 'English', value: 'en' }
])

const notificationOptions = ref([
  { label: 'メール通知', value: 'email' },
  { label: 'プッシュ通知', value: 'push' }
])

const visibilityOptions = ref([
  { label: '公開', value: 'public' },
  { label: '非公開', value: 'private' }
])
</script>

タブ切り替え時の処理

<template>
  <kvc-tab v-model="activeTab" @update:modelValue="handleTabChange">
    <kvc-tab-pane name="list" label="リスト">
      <p>リスト表示</p>
    </kvc-tab-pane>

    <kvc-tab-pane name="grid" label="グリッド">
      <p>グリッド表示</p>
    </kvc-tab-pane>

    <kvc-tab-pane name="detail" label="詳細">
      <p>詳細表示</p>
    </kvc-tab-pane>
  </kvc-tab>

  <p>現在のタブ: {{ activeTab }}</p>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('list')

const handleTabChange = (tabName) => {
  console.log('Tab changed to:', tabName)
  // タブ切り替え時にデータをロードするなど
}
</script>

フォームのステップ表示

<template>
  <kvc-tab v-model="step">
    <kvc-tab-pane name="step1" label="ステップ1: 基本情報">
      <kvc-wrap>
        <kvc-field label="会社名" required>
          <kvc-text-input v-model="form.companyName" />
        </kvc-field>
        <kvc-field label="担当者名" required>
          <kvc-text-input v-model="form.contactName" />
        </kvc-field>
        <kvc-button color="save" @click="goToStep2">
          次へ
        </kvc-button>
      </kvc-wrap>
    </kvc-tab-pane>

    <kvc-tab-pane name="step2" label="ステップ2: 連絡先">
      <kvc-wrap>
        <kvc-field label="メールアドレス" required>
          <kvc-text-input v-model="form.email" type="email" />
        </kvc-field>
        <kvc-field label="電話番号" required>
          <kvc-text-input v-model="form.phone" />
        </kvc-field>
        <kvc-row>
          <kvc-button @click="goToStep1">
            戻る
          </kvc-button>
          <kvc-button color="save" @click="goToStep3">
            次へ
          </kvc-button>
        </kvc-row>
      </kvc-wrap>
    </kvc-tab-pane>

    <kvc-tab-pane name="step3" label="ステップ3: 確認">
      <kvc-wrap>
        <h3>入力内容の確認</h3>
        <p>会社名: {{ form.companyName }}</p>
        <p>担当者名: {{ form.contactName }}</p>
        <p>メールアドレス: {{ form.email }}</p>
        <p>電話番号: {{ form.phone }}</p>
        <kvc-row>
          <kvc-button @click="goToStep2">
            戻る
          </kvc-button>
          <kvc-button color="success" @click="handleSubmit">
            送信
          </kvc-button>
        </kvc-row>
      </kvc-wrap>
    </kvc-tab-pane>
  </kvc-tab>
</template>

<script setup>
import { ref } from 'vue'

const step = ref('step1')

const form = ref({
  companyName: '',
  contactName: '',
  email: '',
  phone: ''
})

const goToStep1 = () => step.value = 'step1'
const goToStep2 = () => step.value = 'step2'
const goToStep3 = () => step.value = 'step3'

const handleSubmit = () => {
  console.log('Form submitted:', form.value)
}
</script>

ダッシュボードのタブ

<template>
  <kvc-tab v-model="dashboardTab">
    <kvc-tab-pane name="overview" label="概要">
      <h2>ダッシュボード概要</h2>
      <p>統計情報やサマリーを表示</p>
    </kvc-tab-pane>

    <kvc-tab-pane name="analytics" label="分析">
      <h2>分析データ</h2>
      <p>詳細な分析結果を表示</p>
    </kvc-tab-pane>

    <kvc-tab-pane name="reports" label="レポート">
      <h2>レポート一覧</h2>
      <p>各種レポートを表示</p>
    </kvc-tab-pane>

    <kvc-tab-pane name="settings" label="設定">
      <h2>ダッシュボード設定</h2>
      <kvc-wrap>
        <kvc-field label="表示項目">
          <kvc-checkbox v-model="dashboardSettings" :items="displayOptions" />
        </kvc-field>
      </kvc-wrap>
    </kvc-tab-pane>
  </kvc-tab>
</template>

<script setup>
import { ref } from 'vue'

const dashboardTab = ref('overview')

const dashboardSettings = ref(['charts', 'tables'])

const displayOptions = ref([
  { label: 'チャート', value: 'charts' },
  { label: 'テーブル', value: 'tables' },
  { label: '統計', value: 'statistics' }
])
</script>

TypeScript サポート

import type { KvcTabProps, KvcTabPaneProps } from '@zygapp/kintone-vue3-component'

const tabProps: KvcTabProps = {
  modelValue: 'tab1',
  small: false,
  width: '100%',
  height: '200px'
}

const paneProps: KvcTabPaneProps = {
  name: 'tab1',
  label: 'タブ1'
}

スタイリング

カスタムスタイルを適用する場合：

<template>
  <kvc-tab v-model="activeTab" class="custom-tabs">
    <kvc-tab-pane name="tab1" label="タブ1">
      <p>内容1</p>
    </kvc-tab-pane>
    <kvc-tab-pane name="tab2" label="タブ2">
      <p>内容2</p>
    </kvc-tab-pane>
  </kvc-tab>
</template>

<style scoped>
.custom-tabs {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}
</style>