Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shwilliam/vue-loading-button

👇 Vue button with slideout loading indicator
https://github.com/shwilliam/vue-loading-button

button component loading vue

Last synced: about 1 month ago
JSON representation

👇 Vue button with slideout loading indicator

Lists

README 

        
# vue-loading-button



> Straightforward Vue button with slideout loading indicator





  Component example use




[![try it on codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4zywwyjxw7)



## Props



| Prop    | Type    | Required | Default | Description                          |

| ------- | ------- | -------- | ------- | ------------------------------------ |

| loading | boolean | false    | false   | Controls loading indicator animation |

| styled  | boolean | false    | false   | Enables opinionated sample styles    |



## Installation



Install the package from npm by running:



```

$ npm i vue-loading-button

```



or



```

$ yarn add vue-loading-button

```



## Usage



Import, register and place the component in your Vue app.



```html



  



```



```js

import VueLoadingButton from 'vue-loading-button'



export default {

  components: {

    VueLoadingButton,

  },

}

```



> 
Unstyled component example use


> Note: By default, this button component will apply minimal styles to enable you to easily add your own implementation-specific CSS. To enable the more opinionated styles seen at the top of this file, pass a `styled` prop as `true` to the button.



## Accessibility



Apply attributes, such as aria-label, directly on the element to apply them to the button.



```html



  



```



## Dev



Running example script requires @vue/cli and @vue/cli-service-global to be installed.

Install globally by running `npm i --g @vue/cli @vue/cli-service-global` or `yarn add global vue/cli @vue/cli-service-global`.



## Contributing



This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/vue-loading-button/issues). If you wish to work on this project:



1.  [Fork the project](https://github.com/shwilliam/vue-loading-button/archive/master.zip)

2.  Create your feature branch (`git checkout -b new-feature-branch`)

3.  Commit your changes (`git commit -am 'add new feature'`)

4.  Push to the branch (`git push origin new-feature-branch`)

5.  [Submit a pull request!](https://github.com/shwilliam/vue-loading-button/pull/new/master)