vue kaiui

Kaiosアプリ用のVueコンポーネントライブラリ。

• インストール
• 使用法
  • コンポーネントAPI
  • スタイル
• 状態
  • コンポーネント
  • ナビゲーション
  • タイポグラフィ
  • その他
• スタイリング、色、フォント
• アイコン
• 貢献

インストール

 npm install vue-kaiui

main.js add

 import Vue from 'vue'
import App from './App.vue'

import VueKaiUI from "vue-kaiui" ; // !
Vue . use ( VueKaiUI ) // !

new Vue ( {
  render : h => h ( App ) ,
} ) . $mount ( '#app' )

使用法

最も重要なことは、すべてのコンポーネントを<kaiui-content>ルートに入れて、Kaiuiがすべてのソフトキーとヘッダーのデザイン要素を管理できるようにすることです。

コンポーネントAPI

使用例については、コンポーネントAPIドキュメントとサンプルアプリを参照してください。

スタイル

:rootスコープを使用して、スタイルのCSS変数を単純にオーバーライドできます。すべてのテーマCSS変数はここにあります。

<style >

: root{
  - - primary - col or : red; 
  - - primary - dark - col or : darkred;
  ...
  --tabbar-tabs-selected-color : blue;
  ...
}

< / style >

状態

貢献を参照してください。

コンポーネント

• ヘッダ
• タブ
• ソフトウェアキー
• リストアイテムをリストします
• セパレーター
• チェックボックス
• ボタン
• 入力
• 複数行の入力
• トースト
• ラジオボタン（グループ）
• 進捗
• スライダー（デザインの更新！）
• 日付/時刻値セレクター
• ダイアログ /値セレクター /オプションメニュー
• 知らせ

ナビゲーション

• リストビュー
• タブビュー
• グリッドビュー

タイポグラフィ

• フォント
• イオニコンアイコン

その他

• テーマ
• 翻訳
• largetext
• ポートレート/ランドスケープモード

スタイリング、色、フォント

タイポグラフィの詳細はこちらをご覧ください。

標準化されたスタイリング、色、フォントは、Asset Directoryにあります。

アイコン

Vue Kaiuiは素晴らしいイオニコンのアイコンを使用しています。

アイコンはAsset Directoryにあります。

貢献

より多くのUIコンポーネントを構築したり、テストを書いたりすることなど、多くのことをすべきことがあります...

現在開いている問題と寄稿ガイドをご覧ください。

プロジェクトを構築およびテストするには、実行されます。

npm install

npm run build

プロジェクトを構築してAPIドキュメントを作成するには、実行されます。

npm run release

---

インスピレーションをありがとうAdrian Machadoに感謝します。彼のAwesome Kaiui（KaiosアプリのReactコンポーネントライブラリ）をご覧ください。

---