KvcGroup

グループコンテナーコンポーネントです。関連するフィールドをグループ化し、開閉可能なセクションとして表示できます。

ライブデモ

基本的な使い方

<template>
  <kvc-group label="基本情報">
    <kvc-field label="名前">
      <kvc-text-input v-model="name" />
    </kvc-field>
    <kvc-field label="メール">
      <kvc-text-input v-model="email" type="email" />
    </kvc-field>
  </kvc-group>
</template>

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

const name = ref('')
const email = ref('')
</script>

プロパティ

プロパティ型デフォルト説明
labelstring'グループ'グループのラベル
openbooleantrueグループの開閉状態
collapsiblebooleantrue開閉可能にするかどうか
widthstring | number400グループの幅

スロット

スロット名説明
defaultグループ内のコンテンツを配置するデフォルトスロット

使用例

基本的な使用

<template>
  <kvc-wrap>
    <kvc-group label="個人情報">
      <kvc-field label="姓">
        <kvc-text-input v-model="user.lastName" />
      </kvc-field>
      <kvc-field label="名">
        <kvc-text-input v-model="user.firstName" />
      </kvc-field>
      <kvc-field label="生年月日">
        <kvc-date-picker v-model="user.birthDate" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="連絡先">
      <kvc-field label="電話番号">
        <kvc-text-input v-model="user.phone" />
      </kvc-field>
      <kvc-field label="メールアドレス">
        <kvc-text-input v-model="user.email" type="email" />
      </kvc-field>
      <kvc-field label="住所">
        <kvc-text-input v-model="user.address" />
      </kvc-field>
    </kvc-group>
  </kvc-wrap>
</template>

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

const user = ref({
  lastName: '',
  firstName: '',
  birthDate: '',
  phone: '',
  email: '',
  address: ''
})
</script>

初期状態で閉じておく

<template>
  <kvc-wrap>
    <kvc-group label="基本設定" :open="true">
      <kvc-field label="サイト名">
        <kvc-text-input v-model="settings.siteName" />
      </kvc-field>
      <kvc-field label="言語">
        <kvc-dropdown v-model="settings.language" :items="languages" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="詳細設定" :open="false">
      <kvc-field label="タイムゾーン">
        <kvc-dropdown v-model="settings.timezone" :items="timezones" />
      </kvc-field>
      <kvc-field label="日付フォーマット">
        <kvc-dropdown v-model="settings.dateFormat" :items="dateFormats" />
      </kvc-field>
    </kvc-group>
  </kvc-wrap>
</template>

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

const settings = ref({
  siteName: '',
  language: 'ja',
  timezone: 'Asia/Tokyo',
  dateFormat: 'YYYY-MM-DD'
})

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

const timezones = ref([
  { label: 'Asia/Tokyo', value: 'Asia/Tokyo' },
  { label: 'America/New_York', value: 'America/New_York' }
])

const dateFormats = ref([
  { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
  { label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' }
])
</script>

開閉状態を制御

<template>
  <kvc-wrap>
    <kvc-group label="セクション1（開いている）" :open="true">
      <kvc-field label="フィールド1">
        <kvc-text-input v-model="field1" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="セクション2（開いている）" :open="true">
      <kvc-field label="フィールド2">
        <kvc-text-input v-model="field2" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="セクション3（閉じている）" :open="false">
      <kvc-field label="フィールド3">
        <kvc-text-input v-model="field3" />
      </kvc-field>
    </kvc-group>
  </kvc-wrap>
</template>

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

const field1 = ref('')
const field2 = ref('')
const field3 = ref('')
</script>

開閉不可のグループ

<template>
  <kvc-wrap>
    <kvc-group label="必須項目" :collapsible="false">
      <kvc-field label="ユーザー名" required>
        <kvc-text-input v-model="username" />
      </kvc-field>
      <kvc-field label="パスワード" required>
        <kvc-text-input v-model="password" type="password" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="オプション項目">
      <kvc-field label="ニックネーム">
        <kvc-text-input v-model="nickname" />
      </kvc-field>
    </kvc-group>
  </kvc-wrap>
</template>

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

const username = ref('')
const password = ref('')
const nickname = ref('')
</script>

フォームの整理

<template>
  <kvc-wrap>
    <kvc-group label="商品情報">
      <kvc-field label="商品名" required>
        <kvc-text-input v-model="product.name" />
      </kvc-field>
      <kvc-field label="カテゴリ" required>
        <kvc-dropdown v-model="product.category" :items="categories" />
      </kvc-field>
      <kvc-field label="価格" required>
        <kvc-text-input v-model="product.price" type="number" />
      </kvc-field>
      <kvc-field label="説明">
        <kvc-textarea v-model="product.description" :rows="5" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="在庫管理">
      <kvc-field label="在庫数">
        <kvc-text-input v-model="product.stock" type="number" />
      </kvc-field>
      <kvc-field label="最小在庫数">
        <kvc-text-input v-model="product.minStock" type="number" />
      </kvc-field>
      <kvc-field label="入荷予定日">
        <kvc-date-picker v-model="product.restockDate" />
      </kvc-field>
    </kvc-group>

    <kvc-group label="画像">
      <kvc-field label="商品画像">
        <kvc-file-select v-model="product.images" accept="image/*" />
      </kvc-field>
    </kvc-group>

    <kvc-row>
      <kvc-button color="save" @click="saveProduct">
        保存
      </kvc-button>
      <kvc-button @click="cancel">
        キャンセル
      </kvc-button>
    </kvc-row>
  </kvc-wrap>
</template>

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

const product = ref({
  name: '',
  category: '',
  price: 0,
  description: '',
  stock: 0,
  minStock: 0,
  restockDate: '',
  images: []
})

const categories = ref([
  { label: '電子機器', value: 'electronics' },
  { label: '衣類', value: 'clothing' },
  { label: '食品', value: 'food' }
])

const saveProduct = () => {
  console.log('Saving product:', product.value)
}

const cancel = () => {
  console.log('Cancelled')
}
</script>

TypeScript サポート

import type { KvcGroupProps } from '@zygapp/kintone-vue3-component'

const props: KvcGroupProps = {
  label: 'グループラベル',
  open: true,
  collapsible: true,
  width: 400
}

スタイリング

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

<template>
  <kvc-group label="カスタムグループ" class="custom-group">
    <kvc-field label="フィールド">
      <kvc-text-input v-model="value" />
    </kvc-field>
  </kvc-group>
</template>

<style scoped>
.custom-group {
  border: 2px solid #3498db;
  border-radius: 8px;
}
</style>
最終更新:
Contributors: k.kato