TODOvue Button

TvButton is a custom button component for web applications.

Table of Contents

• Demo
• Installation
• Usage
• Props
• Events
• Customize
• Development
• Changelog
• Contributing
• License

Installation

Install with npm or yarn

npm install todovue-button

yarn add todovue-button

Import

import { TvButton } from 'todovue-button'

You can also import it directly in the main.js file, so you don't have to import it in the pages

import { createApp } from "vue";
import App from "./App.vue";
import TvButton from "todovue-button";

const app = createApp(App);
app.component("TvButton", TvButton);
app.mount("#app");

Usage

<template>
  <tv-button @click-button="clickHandler">
    Default
  </tv-button>
</template>

<script>
  import TvButton from "todovue-button"; // Only if you have not imported it from main
  export default {
    components: {
      TvButton // Only if you have not imported it from main
    },
    setup() {
      const clickHandler = () => {
        console.log("clicked");
      }

      return {
        clickHandler
      }
    }
  }
</script>

Props

| Name | Type | Default | Description | |--------------|---------|----------|----------------------------------------------------------------------------------------------------| | type | String | button | The type of button | | customStyle | Object | {} | object that defines the custom style of the button. You can include backgroundColor and color. | | isOutlined | Boolean | false | If true, the button will be outlined. | | isSmall | Boolean | false | If true, the button will be small. | | isLarge | Boolean | false | If true, the button will be large. | | isSuccess | Boolean | false | If true, the button will be success. | | icon | String | null | The icon of the button. | | isInfo | Boolean | false | If true, the button will be info. | | isWarning | Boolean | false | If true, the button will be warning. | | isError | Boolean | false | If true, the button will be error. | | isDisabled | Boolean | false | If true, the button will be disabled. | | isText | Boolean | false | If true, the button will be text. | | iconPosition | String | left | The position of the icon. You can use left and right. | | buttonText | String | null | The text of the button. |

Icons

You can use the following icons (icon="account"):

• account
• alert
• arrow-down
• arrow-left
• arrow-right
• arrow-up
• cancel
• cancel-light
• edit
• dark
• favorite
• help
• light
• menu
• menu-light
• minus
• plus
• remove
• search
• search-light
• settings
• share
• star

Events

| Name | Description | |--------------|-----------------------------------------------------------------------------| | click-button | Emitted when the button is clicked. You can use it to call a function, etc. |

Customize

You can customize the button style by passing an object to the customStyle prop. You can include backgroundColor and color.

<template>
  <tv-button :customStyle="customStyle" @click-button="clickHandler">
    Default
  </tv-button>
</template>

<script>
  import { ref } from "vue";
  export default {
    setup() {
      const customStyle = ref({
        backgroundColor: "#000",
        color: "#fff"
      })
      
      const clickHandler = () => {
        console.log("clicked");
      }

      return {
        customStyle,
        clickHandler
      }
    }
  }
</script>

Development

Clone the repository and install the dependencies

git clone https://github.com/TODOvue/todovue-button.git

cd todovue-button

Install the dependencies

yarn install

Run the project

yarn demo

Run the tests

yarn test:unit

Run the linter

yarn lint

Run the build It is not necessary to generate build, since it is generated when you do PR to the master branch

yarn build

License

MIT