Descargar balm ui - descargar código fuente balm ui

balm ui

Datos del sitio web

1.0.0

Descargar

Bálsamo UI

Interfaz de usuario de material de próxima generación para Vue.js

Introducción

BalmUI es una biblioteca de interfaz de usuario de Material Design modular y personalizable para Vue 3.

balm-ui@8 admite Vue 2

Características

UI de clase empresarial diseñada para aplicaciones web
Un conjunto de componentes/complementos/directivas/utilidades de Vue de alta calidad listos para usar
Potente personalización del tema en cada detalle.
Integró un conjunto completo de los últimos íconos de materiales.
Todos los componentes y complementos son altamente personalizables y se pueden usar individualmente
Compatibilidad con TypeScript (actualización)

Documentación y demostraciones

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

Inicio rápido

Requisitos

[email protected]+
Balm CLI o Vue CLI/Vite u otras cadenas de herramientas

1. Para bálsamo CLI

1.0 Crear un proyecto

balm init vue my-project
cd my-project

1.1 Instalación de `balm-ui`

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

1.2 Configuración

actualizar balm.config.js

obtenga íconos de materiales sin descargarlos (o descárguelos y extraigalos en 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 predeterminado

editar my-project/app/styles/global/_vendors.scss
```
 /* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
```
Se recomienda utilizar Sass en /path/to/project-name/styles/_vendors.scss y puede utilizar un uso de estilo más avanzado de BalmUI.

editar 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 independiente

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

editar 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 Desarrollo y pruebas

npm run dev

editar un componente de 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 Agrupación e implementación

npm run prod

2. Para Vue CLI o Vite

2.0 Crear un proyecto

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 Instalación de `balm-ui`

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

2.2 Configuración

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

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

Disfrutar ?

Contribuyendo

¡Nos encantaría que contribuyeras y hicieras BalmUI aún mejor de lo que es hoy! Asegúrese de leer la Guía de contribución antes de realizar una solicitud de extracción. Puede enviar cualquier idea como solicitudes de extracción o como problemas de GitHub.