balm ui Unduh - balm ui Unduh kode sumber

balm ui

Data situs web

1.0.0

Unduh

balsemUI

UI Material Generasi Berikutnya untuk Vue.js

Perkenalan

BalmUI adalah perpustakaan UI Desain Material yang modular dan dapat disesuaikan untuk Vue 3.

balm-ui@8 mendukung Vue 2

Fitur

UI kelas perusahaan yang dirancang untuk aplikasi web
Satu set komponen/plugin/direktif/utilitas Vue berkualitas tinggi yang siap digunakan
Kustomisasi tema yang kuat di setiap detail
Mengintegrasikan satu set lengkap Ikon Material terbaru
Semua komponen dan plugin sangat dapat disesuaikan, dan dapat digunakan secara individual
Dukungan TypeScript (memperbarui)

Dokumentasi & Demo

Kunjungi material.balmjs.com
Kunjungi v8.material.balmjs.com (untuk Vue 2)

Mulai Cepat

Persyaratan

[email protected]+
Balm CLI atau Vue CLI/Vite atau rantai alat lainnya

1. Untuk Balsem CLI

1.0 Buat proyek

balm init vue my-project
cd my-project

1.1 Memasang `balm-ui`

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

1.2 Konfigurasi

perbarui balm.config.js

dapatkan Ikon Material tanpa mengunduh (atau, unduh dan ekstrak ke my-project/app/fonts )

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

edit my-project/config/balmrc.js untuk menggunakan Dart Sass

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

1.3 Penggunaan

Penggunaan Bawaan

edit my-project/app/styles/global/_vendors.scss
```
 /* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
```
Rekomendasikan untuk menggunakan Sass di /path/to/project-name/styles/_vendors.scss , dan Anda dapat menggunakan penggunaan gaya BalmUI yang lebih canggih.

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

Penggunaan Mandiri

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

edit 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 Pengembangan dan pengujian

npm run dev

edit komponen 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 Bundling dan penerapan

npm run prod

2. Untuk Vue CLI atau Vite

2.0 Membuat proyek

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 Memasang `balm-ui`

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

2.2 Konfigurasi

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 Penggunaan

edit 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. Untuk `<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 >

Menikmati ?

Berkontribusi

Kami ingin Anda berkontribusi dan menjadikan BalmUI lebih baik dari sekarang! Harap pastikan untuk membaca Panduan Berkontribusi sebelum membuat permintaan penarikan. Anda dapat mengirimkan ide apa pun sebagai permintaan tarik atau sebagai masalah GitHub.