kintone Vue3 Component

Vue 3用 kintone風 UIコンポーネントライブラリ

はじめるコンポーネント一覧

Vue 3対応

Composition APIを使用した最新のVue 3フレームワークに完全対応しています。

TypeScript完全サポート

すべてのコンポーネントに型定義が提供され、安全な開発体験を提供します。

kintone風デザイン

kintoneの標準UIに準拠したデザインで、統一感のあるアプリケーションを構築できます。

豊富なコンポーネント

フォーム入力、レイアウト、UIなど、19種類以上のコンポーネントを提供しています。

v-model対応

すべてのフォームコンポーネントが双方向バインディングに対応しています。

柔軟なカスタマイズ

スロットやプロパティを使って、簡単にコンポーネントをカスタマイズできます。

クイックスタート

インストール

npm install @zygapp/kintone-vue3-component

使い方

import { createApp } from 'vue'
import KintoneVueComponent from '@zygapp/kintone-vue3-component'
import '@zygapp/kintone-vue3-component/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(KintoneVueComponent)
app.mount('#app')

基本的な使用例

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

    <kvc-field label="メールアドレス">
      <kvc-text-input v-model="email" type="email" />
    </kvc-field>

    <kvc-button color="save" @click="handleSubmit">
      送信
    </kvc-button>
  </kvc-wrap>
</template>

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

const username = ref('')
const email = ref('')

const handleSubmit = () => {
  console.log({ username: username.value, email: email.value })
}
</script>

コンポーネント一覧

レイアウト系

  • KvcWrap - ラッパーコンポーネント
  • KvcRow - 行レイアウト
  • KvcField - フィールドラッパー
  • KvcGroup - グループコンテナー

フォーム入力系

UI系

MIT Licensed | Copyright © 2024 Koji Kato