KvcRow

行レイアウトコンポーネントです。複数の要素を横並びに配置するために使用します。

基本的な使い方

<template>
  <kvc-row>
    <kvc-button>ボタン1</kvc-button>
    <kvc-button>ボタン2</kvc-button>
    <kvc-button>ボタン3</kvc-button>
  </kvc-row>
</template>

プロパティ

KvcRowコンポーネントには特別なプロパティはありません。

スロット

スロット名	説明
default	横並びに配置する要素を配置するデフォルトスロット

使用例

ボタンの横並び配置

<template>
  <kvc-wrap>
    <kvc-field label="名前">
      <kvc-text-input v-model="name" />
    </kvc-field>

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

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

const name = ref('')

const handleSave = () => {
  console.log('Save:', name.value)
}

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

複数のフィールドを横並び

<template>
  <kvc-wrap>
    <kvc-row>
      <kvc-field label="開始日">
        <kvc-date-picker v-model="startDate" />
      </kvc-field>

      <kvc-field label="終了日">
        <kvc-date-picker v-model="endDate" />
      </kvc-field>
    </kvc-row>

    <kvc-button @click="handleSearch">
      検索
    </kvc-button>
  </kvc-wrap>
</template>

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

const startDate = ref('')
const endDate = ref('')

const handleSearch = () => {
  console.log('Search:', { startDate: startDate.value, endDate: endDate.value })
}
</script>

フォームのアクションボタン

<template>
  <kvc-wrap tag="form" @submit="handleSubmit">
    <kvc-field label="タイトル">
      <kvc-text-input v-model="title" />
    </kvc-field>

    <kvc-field label="説明">
      <kvc-textarea v-model="description" :rows="5" />
    </kvc-field>

    <kvc-row>
      <kvc-button color="save" type="submit">
        保存
      </kvc-button>
      <kvc-button color="normal" @click="handlePreview">
        プレビュー
      </kvc-button>
      <kvc-button color="error" @click="handleDelete">
        削除
      </kvc-button>
    </kvc-row>
  </kvc-wrap>
</template>

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

const title = ref('')
const description = ref('')

const handleSubmit = (event) => {
  event.preventDefault()
  console.log('Submitted:', { title: title.value, description: description.value })
}

const handlePreview = () => {
  console.log('Preview')
}

const handleDelete = () => {
  if (confirm('本当に削除しますか?')) {
    console.log('Deleted')
  }
}
</script>

検索フォーム

<template>
  <kvc-wrap>
    <kvc-row>
      <kvc-field label="キーワード">
        <kvc-text-input v-model="keyword" placeholder="検索キーワード" />
      </kvc-field>

      <kvc-field label="カテゴリ">
        <kvc-dropdown v-model="category" :items="categories" />
      </kvc-field>

      <kvc-field label="ステータス">
        <kvc-dropdown v-model="status" :items="statuses" />
      </kvc-field>
    </kvc-row>

    <kvc-row>
      <kvc-button color="save" @click="handleSearch">
        検索
      </kvc-button>
      <kvc-button @click="handleReset">
        リセット
      </kvc-button>
    </kvc-row>
  </kvc-wrap>
</template>

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

const keyword = ref('')
const category = ref('')
const status = ref('')

const categories = ref([
  { label: 'すべて', value: '' },
  { label: 'カテゴリA', value: 'a' },
  { label: 'カテゴリB', value: 'b' }
])

const statuses = ref([
  { label: 'すべて', value: '' },
  { label: '公開', value: 'published' },
  { label: '下書き', value: 'draft' }
])

const handleSearch = () => {
  console.log('Search:', { keyword: keyword.value, category: category.value, status: status.value })
}

const handleReset = () => {
  keyword.value = ''
  category.value = ''
  status.value = ''
}
</script>

日時範囲の入力

<template>
  <kvc-wrap>
    <kvc-row>
      <kvc-field label="開始日時">
        <kvc-datetime-picker v-model="startDateTime" />
      </kvc-field>

      <span style="line-height: 40px; margin: 0 10px;">〜</span>

      <kvc-field label="終了日時">
        <kvc-datetime-picker v-model="endDateTime" />
      </kvc-field>
    </kvc-row>
  </kvc-wrap>
</template>

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

const startDateTime = ref('')
const endDateTime = ref('')
</script>

スタイリング

KvcRowは内部でflexboxレイアウトを使用しており、要素を横並びに配置します。各要素間には適切なスペーシングが自動的に追加されます。

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

<template>
  <kvc-row class="custom-row">
    <kvc-button>ボタン1</kvc-button>
    <kvc-button>ボタン2</kvc-button>
  </kvc-row>
</template>

<style scoped>
.custom-row {
  justify-content: flex-end;
  gap: 20px;
}
</style>

TypeScript サポート

// KvcRowには特別なプロパティはありません