Download balm ui - download do código-fonte balm ui

balm ui

Dados do site

1.0.0

Baixar

BalmUI

UI de material de última geração para Vue.js

Introdução

BalmUI é uma biblioteca de UI de Material Design modular e personalizável para Vue 3.

balm-ui@8 suporta Vue 2

Características

UI de classe empresarial projetada para aplicativos da web
Um conjunto de componentes/plugins/diretivas/utilitários Vue de alta qualidade prontos para uso
Personalização poderosa do tema em todos os detalhes
Integrou um conjunto completo dos mais recentes ícones de materiais
Todos os componentes e plug-ins são altamente personalizáveis e podem ser usados individualmente
Suporte TypeScript (atualização)

Documentação e demonstrações

Visite material.balmjs.com
Visite v8.material.balmjs.com (para Vue 2)

Início rápido

Requisitos

[email protected]+
Balm CLI ou Vue CLI/Vite ou outras cadeias de ferramentas

1. Para Bálsamo CLI

1.0 Crie um projeto

balm init vue my-project
cd my-project

1.1 Instalando `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

1.2 Configuração

atualizar balm.config.js

obtenha ícones de materiais sem fazer download (ou baixe e extraia para my-project/app/fonts )

 const api = ( mix ) => {
  if ( mix . env . isDev ) {
    mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
  }
} ;

edite my-project/config/balmrc.js para usar Dart Sass

 module . exports = {
  styles : {
    extname : 'scss'
  }
  // Other Options...
} ;

1.3 Uso

Uso padrão

edite my-project/app/styles/global/_vendors.scss
```
 /* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
```
Recomendo usar Sass em /path/to/project-name/styles/_vendors.scss , e você pode usar um estilo mais avançado de uso do BalmUI.

edite 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' ) ;

Uso autônomo

edite 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 ' ;

edite 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' ) ;

1.4 Desenvolvimento e testes

npm run dev

edite um componente 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 >

1.5 Agrupamento e implantação

npm run prod

2. Para Vue CLI ou Vite

2.0 Crie um projeto

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-project

2.1 Instalando `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

2.2 Configuração

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'
    }
  }
} ) ;

2.3 Uso

edite 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' ) ;

3. Para `<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 >

Aproveitar ?

Contribuindo

Adoraríamos que você contribuísse e tornasse o BalmUI ainda melhor do que é hoje! Certifique-se de ler o Guia de Contribuição antes de fazer uma solicitação pull. Você pode enviar ideias como solicitações pull ou como problemas do GitHub.