balm ui
1.0.0
Interface utilisateur matérielle de nouvelle génération pour Vue.js
BalmUI est une bibliothèque d'interface utilisateur Material Design modulaire et personnalisable pour Vue 3.
balm-ui@8prend en charge Vue 2
balm init vue my-project
cd my-projectbalm-ui yarn add balm-ui
# OR
npm install --save balm-ui mettre à jour balm.config.js
obtenez des icônes matérielles sans téléchargement (ou téléchargez et extrayez dans my-project/app/fonts )
const api = ( mix ) => {
if ( mix . env . isDev ) {
mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
}
} ; modifier my-project/config/balmrc.js pour utiliser Dart Sass
module . exports = {
styles : {
extname : 'scss'
}
// Other Options...
} ; modifier my-project/app/styles/global/_vendors.scss
/* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;Il est recommandé d'utiliser Sass dans
/path/to/project-name/styles/_vendors.scss, et vous pouvez utiliser une utilisation de style plus avancée de BalmUI.
modifier 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' ) ; modifier 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 ' ; modifier 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 modifier un composant 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 prod vue-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-ui vue-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'
}
}
} ) ; modifier 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 >Apprécier ?
Nous serions ravis que vous contribuiez et rendiez BalmUI encore meilleur qu'il ne l'est aujourd'hui ! Veuillez vous assurer de lire le guide de contribution avant de faire une pull request. Vous pouvez soumettre des idées sous forme de demandes d'extraction ou de problèmes GitHub.
Nous prenons officiellement en charge les deux dernières versions de tous les principaux navigateurs. Plus précisément, nous testons sur les navigateurs suivants :
