0.1.3 • Published 4 years ago
v-pill-button
Simple pill divided into 2 buttons.
Usage
<template>
<v-pill-button
@onRightButtonClick="onRightButtonClick"
@onLeftButtonClick="onLeftButtonClick">
<template slot="left">
left button
</template>
<template slot="right">
right button
</template>
</v-pill-button>
</template>
import VPillButton from "v-pill-button";
export default {
components: { VPillButton },
methods: {
onLeftButtonCLick(){
//handle event
},
onRightButtonCLick(){
//handle event
},
},
};
Props
Prop | Type | Required | Default | Description |
---|
color | string | false | #ddd | Button primary color |
small/medium/large | boolean | false | | Button size (medium by default) |
disabled | boolean | false | false | Disables right button making it text only |
Slots
Slot | Description |
---|
right | text for right button |
left | text for left button |
Events
Event | Description |
---|
onLeftButtonClick | Emits when left button pressed |
onRightButtonClick | Emits when right button pressed |