@happyjayxin/ubutton v0.3.0

U-Button

Vue button with simple style.

Demo

U-Button

Install

NPM

npm install @happyjayxin/ubutton

CDN

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.jsdelivr.net/npm/@happyjayxin/ubutton@0.3.0/dist/u-button.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@happyjayxin/ubutton"></script>

Global install as a vue plugin

import Vue from 'vue';
import UButton from '@happyjayxin/ubutton';
import '@happyjayxin/ubutton/dist/u-button.css';
Vue.use(UButton);

// You can set default global options.
Vue.use(UButton, {
  theme: '#f00', // Button theme
  outline: true,
  round: '1'
});

Or import UButton as a local component

<script type="text/ecmascript-6">
  import { UButton } from "@happyjayxin/ubutton";
  import "@happyjayxin/ubutton/dist/u-button.css";

  export default {
    components: { UButton }
  };
</script>

Usage

<template>
  <div id="app">
    <u-button @click="sayHello" theme="#079992">Hello u-button</u-button>
  </div>
</template>

<script>
  export default {
    name: 'app',
    methods: {
      sayHello() {
        alert('Hello');
      }
    }
  };
</script>

See more Example Code

Using with Nuxt

Create the file ~/plugins/vue-u-button

import Vue from 'vue';
import UButton from '@happyjayxin/ubutton';
import '@happyjayxin/ubutton/dist/u-button.css';
Vue.use(UButton);

Then add the file path inside the plugins key of our nuxt.config.js

export default {
  plugins: ['~/plugins/vue-u-button']
};

Attributes

Props

Event

License

This software is licensed under the MIT.