quiダウンロードquiソースコードのダウンロード

Web用のVue.js Neumorphism Design System

レスポンシブでユーザーフレンドリーで軽量なライブラリが、お客様に最適な製品を構築するのに役立ちます。 VUE 2.xのこのライブラリ

！️現在、Vue 3.xのQui Maxに取り組んでいます。これは、より複雑で最新バージョンのQuiです。このパッケージの代わりに使用することをお勧めします。 QuiはVue 2.xのために残っていますが、それがうまくサポートされると主張することはできません。

ストーリーブック（ライブデモ）

それは何ですか？

？ 30以上のVueコンポーネント
？アイコンパック
？€？？色とグリッド
？ノイモルフィズムスタイル
ストーリーブックサンドボックス

以下の例：

ボタンテーブル datepicker

インストール

CDN：

 <!-- import CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/@qvant/qui/dist/qui.css " />
<!-- import JavaScript -->
< script src =" https://unpkg.com/@qvant/qui/dist/qui.umd.min.js " > </ script >

npm |糸：

npm install @qvant/qui -S
yarn add @qvant/qui

quiを完全にインポートするか、必要なものをインポートすることもできます。完全にインポートすることから始めましょう。

クイックセットアップ

main.js：

 import Vue from 'vue' ;
import Qui from '@qvant/qui' ;
import '@qvant/qui/dist/qui.css' ;

// Setup all components
Vue . use ( Qui ) ;
// that's it! All components will be imported with styles

yourcomponent.vue ：（例）

< template >
  < q-input v-model = " value " />
</ template >
< script >
export default {
  data () {
    return {
      value : ' '
    };
  },
  mounted () {
    // the modals have shortcuts in your components:
    this . $notify ({ ... }) // calls QNotification
    this . $message ({ ... }) // calls QMessageBox
    this . $dialog ({ ... }) // calls QDialog
  }
};
</ script >

...またはクイックセットアップを構成します

main.js：

 import Vue from 'vue' ;
import Qui from '@qvant/qui' ;
import '@qvant/qui/dist/qui.css' ;

Vue . use ( Qui , {
  localization : {
    locale : 'en' , // Russian language by default, you can set `en` for English
    customI18nMessages : {
      // rewrite default texts, see the source: src/qComponents/constants/locales
      en : {
        QDatepicker : {
          placeholder : 'Pick your birthday!'
        }
      }
    } ,
    zIndexCounter : 3000 , // zIndexCounter is being used by some components, (e.g QPopover, QSelect, QDialog ...etc), 2000 by default
    prefix : 'yo' // you can change component's prefix, e.g. must be used <yo-input /> instead of <q-input />
  }
} ) ;

yourcomponent.vue ：（例）

< template >
  <!-- placeholder is changed on 'Pick your birthday!' -->
  < yo-datepicker v-model = " value " type = " date " />
</ template >
< script >
export default {
  data () {
    return {
      value : null
    };
  }
};
</ script >

今、あなたはあなたのプロジェクトにVueとQuiを実装しました、そして今度はあなたのコードを書く時です。それらを使用する方法を学ぶには、各コンポーネントのストーリーを参照してください。

クイックセットアップではありません

モジュールバンドラー（Webpackなど）がある場合は、コンポーネントを個別にインポートして、バンドルサイズに注意することができます

main.js：

 // import the main plugin from another place (it ensures Qui will be installed without any components, but instance will set required properties and directives)
import Qui from '@qvant/qui/src/onDemand' ;

// import the component you want
import QButton from '@qvant/qui/src/qComponents/QButton' ;
// ...or in async way
Vue . component ( 'q-button' , ( ) =>
  import ( /* webpackChunkName: "qui" */ '@qvant/qui/src/qComponents/QButton' )
) ;

// init
Vue . use ( Qui ) ;
Vue . use ( QButton ) ;

main.scss：

 // need to set the path for files with statics
$--base-path : ' ~@qvant/qui/src ' ;
// set main styles
@import ' ~@qvant/qui/src/main.scss ' ;
// notice that you must use `fonts` and `icons` styles for some of components:
@import ' ~@qvant/qui/src/fonts/index.scss ' ;
@import ' ~@qvant/qui/src/icons/index.scss ' ;

すべてのスタイルをインポートします：

 @import ' ~@qvant/qui/src/components.scss ' ;

...またはコンポーネントを個別に：

 @import ' ~@qvant/qui/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss ' ;
@import ' ~@qvant/qui/src/qComponents/QButton/src/q-button.scss ' ;
// ...etc

オプション

コンポーネント内のモーダルを「これ」のプロパティとして使用したい場合：

 import { QMessageBox , QDialog , QNotification } from '@qvant/qui' ;
// or import separately
import QMessageBox from '@qvant/qui/src/qComponents/QMessageBox' ;
import QDialog from '@qvant/qui/src/qComponents/QDialog' ;
import QNotification from '@qvant/qui/src/qComponents/QNotification' ;

Vue . prototype . $message = QMessageBox ;
Vue . prototype . $dialog = QDialog ;
Vue . prototype . $notify = options =>
  QNotification ( {
    duration : 3000 , // - ms
    ... options
  } ) ;

VUEI18Nを使用する場合、メッセージをマージする必要があります。

 import VueI18n from 'vue-i18n' ;
import { en , ru } from '@qvant/qui/src/qComponents/constants/locales' ;

Vue . use ( VueI18n ) ;

const messages = {
  en : {
    message : {
      hello : 'hello world'
    } ,
    ... en
  } ,
  ru : {
    message : {
      hello : 'привет, мир'
    } ,
    ... ru
  }
} ;

const i18n = new VueI18n ( {
  locale : 'en' ,
  messages
} ) ;

new Vue ( {
  i18n
} ) . $mount ( '#your-app' ) ;