vuejs,

Material Component Untuk Vue.js

Ham Ham Follow Apr 24, 2020 · 3 mins read
Material Component Untuk Vue.js
Share this

Material Componen kali ini dikembangkan oleh lbzui dengan berbagai fitur lengkap dan tampilan yang elegan.

Beberapa fitur diantaranya konsep desain seperti Material.io, dukungan tema Light & Dark, desain responsive, dukungan <router-link> dan custom tag pada komponen, tersedia berbagai Layout, dan menggunakan Vue (2.6.0+), TypeScript, Less (3.5.0+), PostCSS, dll.

Jika kamu ingin mencobanya, langsung saja ikuti langkah-langkab berikut ini.

Install menggunakan CDN

Cukup sisipkan CSS di dalam <head>...</head>, seperti berikut ini

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>lbzui-vue-demo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons&display=block">
    <link rel="stylesheet" href="https://unpkg.com/@lbzui/vue/lib/lbzui.css">
  </head>
  <body>
    <div id="app">
      <lbz-button icon="favorite" @click.stop="fclick">Click me</lbz-button>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/@lbzui/vue"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          fclick(e) {
            alert('Hello @lbzui/vue!');
          }
        }
      })
    </script>
  </body>
</html>

Instal menggunakan NPM

Pertama buat project menggunakan Vue CLI, dengan perintah berikut

npm i @vue/cli -g

Atau

yarn global add @vue/cli

Buat project baru

vue add lbzui-vue-demo

Install @lbzui/vue ke project yang telah kita buat

npm i yarn add @lbzui/vue -S

Atau

yarn add @lbzui/vue

Import @lbzui/vue kedalam file src/main.js seperti berikut ini

import '@lbzui/vue/lib/lbzui.css';
import LBZUI from '@lbzui/vue';

Vue.use(LBZUI, {
  dense: false,
  ripple: true,
});

Atau import komponen secara terpisah

import '@lbzui/vue/lib/lbzui.css';
import {
  Backdrop,
  Button,
  Card,
  Checkbox,
  Dialog,
  Divider,
  Drawer,
  EmptyState,
  FAB,
  Icon,
  IconButton,
  List,
  ListItem,
  Radio,
  Snackbar,
  State,
  Switch,
  Tab,
  TabItem,
  TopAppBar,
} from '@lbzui/vue';

Vue.prototype.$lbzui = {
  dense: false,
  ripple: true,
};

Vue.use(Backdrop);
Vue.use(Button);
Vue.use(Card);
Vue.use(Checkbox);
Vue.use(Dialog);
Vue.use(Divider);
Vue.use(Drawer);
Vue.use(EmptyState);
Vue.use(FAB);
Vue.use(Icon);
Vue.use(IconButton);
Vue.use(List);
Vue.use(ListItem);
Vue.use(Radio);
Vue.use(State);
Vue.use(Switch);
Vue.use(Tab);
Vue.use(TabItem);
Vue.use(TopAppBar);

Vue.prototype.$lbzSnackbar = Snackbar;

Langkah selanjutnya, tinggal kita buat aplikasi sesuai dengan yang kita inginkan.

Untuk demo dan detail lengkapnya silahkan lihat Dokumentasi atau cek Github: lbzui/vue

Dapatkan Update
Dapatkan update artikel dengan mudah, cukup masukkan emailmu aja!
Ham
Ham Follow
Hi, saya Ham, semoga artikel yang saya bagikan bermanfaat