balm ui
1.0.0
Пользовательский интерфейс Material нового поколения для Vue.js
BalmUI — это модульная и настраиваемая библиотека пользовательского интерфейса Material Design для Vue 3.
balm-ui@8поддерживает Vue 2
balm init vue my-project
cd my-projectbalm-ui yarn add balm-ui
# OR
npm install --save balm-ui обновить balm.config.js
получить значки материалов без загрузки (или загрузить и извлечь их в my-project/app/fonts )
const api = ( mix ) => {
if ( mix . env . isDev ) {
mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
}
} ; отредактируйте my-project/config/balmrc.js для использования Dart Sass
module . exports = {
styles : {
extname : 'scss'
}
// Other Options...
} ; отредактируйте my-project/app/styles/global/_vendors.scss
/* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;Рекомендуется использовать Sass в
/path/to/project-name/styles/_vendors.scss, и вы можете использовать более продвинутое использование стилей 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 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'
}
}
} ) ; отредактируйте 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.
Мы официально поддерживаем последние две версии всех основных браузеров. В частности, мы тестируем в следующих браузерах:
