KvcButton

ボタンコンポーネントです。様々なカラーバリエーションを提供します。

ライブデモ

基本的な使い方

<template>
  <kvc-button @click="handleClick">
    クリック
  </kvc-button>
</template>

<script setup>
const handleClick = () => {
  console.log('Button clicked')
}
</script>

プロパティ

プロパティ型デフォルト説明
color'normal' | 'success' | 'save' | 'error''normal'ボタンのカラー
type'button' | 'submit' | 'reset''button'ボタンのタイプ
disabledbooleanfalse無効化状態

イベント

イベント名ペイロード説明
clickMouseEventボタンがクリックされたときに発火

スロット

スロット名説明
defaultボタンのテキストを配置するデフォルトスロット

カラーバリエーション

  • normal: 通常のボタン（グレー系）
  • success: 成功・完了を示すボタン（グリーン系）
  • save: 保存アクションを示すボタン（ブルー系）
  • error: エラー・削除を示すボタン（レッド系）

使用例

基本的な使用

<template>
  <kvc-button @click="handleClick">
    クリックしてください
  </kvc-button>
</template>

<script setup>
const handleClick = () => {
  alert('ボタンがクリックされました')
}
</script>

カラーバリエーション

<template>
  <kvc-row>
    <kvc-button color="normal" @click="handleNormal">
      通常
    </kvc-button>

    <kvc-button color="success" @click="handleSuccess">
      成功
    </kvc-button>

    <kvc-button color="save" @click="handleSave">
      保存
    </kvc-button>

    <kvc-button color="error" @click="handleError">
      削除
    </kvc-button>
  </kvc-row>
</template>

<script setup>
const handleNormal = () => console.log('Normal')
const handleSuccess = () => console.log('Success')
const handleSave = () => console.log('Save')
const handleError = () => console.log('Error')
</script>

フォーム送信ボタン

<template>
  <kvc-wrap tag="form" @submit="handleSubmit">
    <kvc-field label="ユーザー名">
      <kvc-text-input v-model="username" />
    </kvc-field>

    <kvc-field label="パスワード">
      <kvc-text-input v-model="password" type="password" />
    </kvc-field>

    <kvc-button color="save" type="submit">
      ログイン
    </kvc-button>
  </kvc-wrap>
</template>

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

const username = ref('')
const password = ref('')

const handleSubmit = (event) => {
  event.preventDefault()
  console.log('Login:', { username: username.value, password: password.value })
}
</script>

無効化状態

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

    <kvc-row>
      <kvc-button
        color="save"
        :disabled="!name"
        @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('Saved:', name.value)
}

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

確認ダイアログ付き削除ボタン

<template>
  <kvc-row>
    <kvc-button color="error" @click="handleDelete">
      削除
    </kvc-button>
  </kvc-row>
</template>

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

ローディング状態の実装

<template>
  <kvc-row>
    <kvc-button
      color="save"
      :disabled="loading"
      @click="handleSave"
    >
      {{ loading ? '保存中...' : '保存' }}
    </kvc-button>
  </kvc-row>
</template>

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

const loading = ref(false)

const handleSave = async () => {
  loading.value = true
  try {
    // 保存処理
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('Saved')
  } finally {
    loading.value = false
  }
}
</script>

アイコン付きボタン

<template>
  <kvc-row>
    <kvc-button color="save" @click="handleSave">
      <Icon icon="mdi:content-save" />
      保存
    </kvc-button>

    <kvc-button color="error" @click="handleDelete">
      <Icon icon="mdi:delete" />
      削除
    </kvc-button>

    <kvc-button @click="handleRefresh">
      <Icon icon="mdi:refresh" />
      更新
    </kvc-button>
  </kvc-row>
</template>

<script setup>
import { Icon } from '@iconify/vue'

const handleSave = () => console.log('Save')
const handleDelete = () => console.log('Delete')
const handleRefresh = () => console.log('Refresh')
</script>

複数のアクションボタン

<template>
  <kvc-wrap>
    <kvc-field label="記事タイトル">
      <kvc-text-input v-model="title" />
    </kvc-field>

    <kvc-field label="内容">
      <kvc-textarea v-model="content" :rows="10" />
    </kvc-field>

    <kvc-row>
      <kvc-button color="save" @click="handleSave">
        保存
      </kvc-button>

      <kvc-button color="success" @click="handlePublish">
        公開
      </kvc-button>

      <kvc-button @click="handlePreview">
        プレビュー
      </kvc-button>

      <kvc-button @click="handleDraft">
        下書きに戻す
      </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 content = ref('')

const handleSave = () => console.log('Save')
const handlePublish = () => console.log('Publish')
const handlePreview = () => console.log('Preview')
const handleDraft = () => console.log('Draft')
const handleDelete = () => {
  if (confirm('本当に削除しますか?')) {
    console.log('Delete')
  }
}
</script>

TypeScript サポート

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

const props: KvcButtonProps = {
  color: 'save',
  type: 'button',
  disabled: false
}

スタイリング

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

<template>
  <kvc-button class="custom-button" @click="handleClick">
    カスタムボタン
  </kvc-button>
</template>

<style scoped>
.custom-button {
  min-width: 200px;
  font-size: 18px;
}
</style>
最終更新:
Contributors: k.kato