RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/balmjs/balm-ui/tree/8.x below:

GitHub - balmjs/balm-ui at 8.x

Next Generation Material UI for Vue.js

TL;DR: Vue 3 is now the new default version as of Monday, February 7, 2022!

(old) material.balmjs.com -> v8.material.balmjs.com

BalmUI is a modular and customizable Material Design UI library for Vue.js.

🎉 NOW, balm-ui (v9+) supports for Vue 3.0

Enterprise-class UI designed for web applications
A set of high-quality Vue components/plugins/directives/utils out of the box
Powerful theme customization in every detail
Integrated a complete set of the latest Material Icons
All components and plugins is highly customizable, and can be used individually

Visit v8.material.balmjs.com (for Vue 2)
Visit material.balmjs.com (for Vue 3)

Vue.js@2.1.0+
🚀 Balm CLI(Recommended) or Vue CLI or other toolchains

1. For Balm CLI (Recommended)

balm init vue#legacy my-project
cd my-project

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

update balm.config.js

get Material Icons without downloading (or, download and extract to 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 for using Dart Sass

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

edit my-project/app/styles/global/_vendor.scss
```
/* import BalmUI styles */
@use 'balm-ui/dist/balm-ui';
```
Recommend to use Sass in /path/to/project-name/styles/_vendor.scss, and you can use more advanced style usage of the BalmUI.

edit my-project/app/scripts/main.js

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

edit my-project/app/styles/global/_vendor.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 Vue from 'vue';
import UiButton from 'balm-ui/components/button';
import $alert from 'balm-ui/plugins/alert';

Vue.use(UiButton);
Vue.use($alert);

1.4 Development and testing

edit a vue component: 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 and deployment

vue create my-project
cd my-project

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

edit my-project/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');
  // }
};

edit my-project/src/main.js

import Vue 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';

Vue.config.productionTip = false;

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

new Vue({
  render: (h) => h(App)
}).$mount('#app');

<!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://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"
    />
  </head>
  <body>
    <div id="app">
      <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello BalmUI'
        }
      });
    </script>
  </body>
</html>

Enjoy 👻

We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

Chrome on Android, Windows, macOS, and Linux
Firefox on Windows, macOS, and Linux
Safari on iOS and macOS
Edge on Windows
IE 11 on Windows

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4