lagabu v0.0.1-alpha.22

Description

Lagabu is a components library based on vue@3.0.0. You can visit https://zzh97228.github.io/Lagabu/docs to see the latest documentation.

Components

• Alert
• App
• Avatar
• Btn
• Badge
• Card
• Carousel
• Chip
• Checkbox
• DatePicker
• Dropdown
• Field
• FileInput
• FormField
• Slider
• TextArea
• TextInput
• Grid
• Icon(use @fontawesome-free icon)
• List
• Nav
• Progress
• TextEditor(self made WYSIWYG Editor)

Installation

npm install lagabu

# or

yarn add lagabu

Usage

// main.js

import lagabu from 'lagabu';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App)
  .use(lagabu, {
    // customize theme color
    colors: {
      primary: '#f40552',
    },
  })
  .mount('#app');

<template>
  <app>
    <row>
      <row-item>
        <btn :color="state.color" @click="onClick" depressed>Button</btn>
      </row-item>
      <row-item>
        {{ state.color }}
      </row-item>
    </row>
  </app>
</template>

<script>
  // App.vue
    import { reactive } from 'vue'
    export default {
      name: 'App'
      setup() {
        const state = reactive({
          color: 'primary'
        })
        const onClick = () => {
          state.color === 'primary' ? 'success' : 'primary'
        }
        return {
          state,
          onClick
        }
      }
    }
</script>