balm ui
1.0.0
Vue.js の次世代マテリアル UI
BalmUI は、Vue 3 用のモジュール式でカスタマイズ可能なマテリアル デザイン UI ライブラリです。
balm-ui@8Vue 2 をサポートします
balm init vue my-project
cd my-projectbalm-uiのインストールyarn add balm-ui
# OR
npm install --save balm-uibalm.config.jsを更新する
ダウンロードせずにマテリアル アイコンを取得 (または、ダウンロードしてmy-project/app/fontsに抽出)
const api = ( mix ) => {
if ( mix . env . isDev ) {
mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
}
} ; Dart Sass を使用するためにmy-project/config/balmrc.jsを編集します
module . exports = {
styles : {
extname : 'scss'
}
// Other Options...
} ; my-project/app/styles/global/_vendors.scssを編集します
/* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
/path/to/project-name/styles/_vendors.scssで Sass を使用することをお勧めします。これにより、BalmUI のより高度なスタイルの使用法を使用できるようになります。
my-project/app/scripts/main.jsを編集します
import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus' ; // BalmJS Team Material Components
const app = createApp ( App ) ;
app . use ( BalmUI ) ; // Mandatory
app . use ( BalmUIPlus ) ; // Optional
app . mount ( '#app' ) ; my-project/app/styles/global/_vendors.scssを編集します
@use ' balm-ui/components/core ' ;
@use ' balm-ui/components/button/button ' ;
@use ' balm-ui/components/icon/icon ' ;
@use ' balm-ui/components/dialog/dialog ' ;
@use ' balm-ui/plugins/alert/alert ' ; my-project/app/scripts/main.jsを編集します
import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import UiButton from 'balm-ui/components/button' ;
import $alert from 'balm-ui/plugins/alert' ;
const app = createApp ( App ) ;
app . use ( UiButton ) ;
app . use ( $alert ) ;
app . mount ( '#app' ) ; npm run dev Vue コンポーネントを編集します: my-project/app/scripts/views/components/hello.vue
< template >
< div class =" hello " >
...
<!-- Add a test button -->
< ui-button @click =" $alert('Hello BalmUI') " > Click Me </ ui-button >
</ div >
</ template > npm run prodvue-cli
vue create my-project
cd my-project vite
# npm 6.x
npm init @vitejs/app my-project --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-project -- --template vue
# yarn
yarn create @vitejs/app my-project --template vue
cd my-projectbalm-uiのインストールyarn add balm-ui
# OR
npm install --save balm-uivue-cli
// vue.config.js
module . exports = {
runtimeCompiler : true ,
// NOTE: set alias via `configureWebpack` or `chainWebpack`
configureWebpack : {
resolve : {
alias : {
'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.js' ,
'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
}
}
}
// chainWebpack: (config) => {
// config.resolve.alias
// .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
// .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
// }
} ; vite
// vite.config.js
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
export default defineConfig ( {
plugins : [ vue ( ) ] ,
resolve : {
alias : {
vue : 'vue/dist/vue.esm-bundler.js' ,
'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.esm.js' ,
'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
}
}
} ) ; my-project/src/main.jsを編集します
import { createApp } from 'vue' ;
import App from './App.vue' ;
import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui-plus' ; // BalmJS Team Material Components
import 'balm-ui-css' ;
const app = createApp ( App ) ;
app . use ( BalmUI ) ;
app . use ( BalmUIPlus ) ;
app . mount ( '#app' ) ;<script>の場合 <!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title > Hello BalmUI </ title >
< link rel =" stylesheet " href =" https://unpkg.com/balm-ui/dist/balm-ui.css " />
</ head >
< body >
< div id =" app " >
< ui-button icon =" add " @click =" $alert(message) " > SayHi </ ui-button >
</ div >
< script src =" https://unpkg.com/vue " > </ script >
< script src =" https://unpkg.com/balm-ui " > </ script >
< script src =" https://unpkg.com/balm-ui/dist/balm-ui-plus.js " > </ script >
< script >
const app = Vue . createApp ( {
setup ( ) {
var message = 'Hello BalmUI' ;
return {
message
} ;
}
} ) ;
app . use ( BalmUI ) ;
app . use ( BalmUIPlus ) ;
app . mount ( '#app' ) ;
</ script >
</ body >
</ html >楽しむ ？
ぜひご協力いただき、BalmUI を今よりもさらに良いものにしてください。プル リクエストを行う前に、コントリビュート ガイドを必ずお読みください。アイデアはプル リクエストまたは GitHub の問題として送信できます。
私たちは、すべての主要なブラウザーの最後の 2 つのバージョンを正式にサポートしています。具体的には、次のブラウザでテストします。
