Description

Lagabu is a components library based on [email protected]. You can visit https://zzh97228.github.io/Lagabu/docs to see the latest documentation.

Components

• [x] Alert
• [x] App
• [x] Avatar
• [x] Btn
• [x] Badge
• [x] Card
• [x] Carousel
• [x] Chip
• [x] Checkbox
• [x] DatePicker
• [x] Dropdown
• [x] Field
• [x] FileInput
• [x] FormField
• [x] Slider
• [x] TextArea
• [x] TextInput
• [x] Grid
• [x] Icon(use @fontawesome-free icon)
• [x] List
• [x] Nav
• [x] Progress
• [x] 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>