lkt-button v2.0.10
LKT Button
A simple button component for Vue.js 3.0.
Installation
With npm
npm i -S lkt-button
Typical use:
In your main.js
import LktButton from 'lkt-button';
app.use(LktButton);
App use options:
defaultState
string (default: undefined) => Set a default state for all buttons
In your component:
<lkt-button v-on:click="doSomething" v-bind:disabled="disabledChecker"></lkt-button>
export default {
methods: {
doSomething() {
console.log('May the force be with you');
},
disabledChecker() {
return false;
},
}
}
Props
type
Type: String
Required: false
Default: button
Options: button
, submit
, reset
Determines which kind of button will be.
<lkt-button type="submit"></lkt-button>
name
Type: String
Required: false
Default: a random string is generated
An identifier emitted on click.
<lkt-button name="sendMessage"></lkt-button>
value
Type: String
Required: false
Default: '
Set a value for form buttons. Emitted on click.
<lkt-button v-bind:value="myButton"></lkt-button>
palette
Type: String
Required: false
Default: ''
Appends a palette classname. It's useful for palette control and styling.
<lkt-button palette="calculating"></lkt-button>
disabled
Type: Boolean
Required: false
Default: false
Determines if button is disabled or not.
<lkt-button disabled></lkt-button>
<lkt-button v-bind:disabled="disabledChecker"></lkt-button>
Events
LktButton emits these events:
click
HTML:
<lkt-button v-on:click="doSomething"></lkt-button>
Slots
default slot
This slot allows you to fill the button with whatever you want.
<lkt-button name="testButton" v-on:click="doSomething">
Click, me!
</lkt-button>
prev/next slot
These slots are designed to add something before/after the text, like an icon.
<lkt-button name="testButton" v-on:click="doSomething">
Click, me!
<template v-slot:prev>
<i class="font-icon"></i>
</template>
<template v-slot:next>
<i class="font-icon2"></i>
</template>
</lkt-button>
prev-loading/next-loading slot
Same as prev/next but only appears if button is loading
<lkt-button name="testButton" v-on:click="doSomething">
Click, me!
<template v-slot:prev-loading>
<i class="font-icon"></i>
</template>
<template v-slot:next-loading>
<i class="font-icon2"></i>
</template>
</lkt-button>
Styling
Style configuration
If you want to modify the default style without having to override styles in CSS, you can use the configurator like this:
@use "node_modules/lkt-button/lkt-button";
@include lkt-button.configure((border-width: 2px)); //opts list
Available style options
Option | Default value |
---|---|
border-width | 1px |
border-style | solid |
border-color | #ddd |
color | #333 |
background | transparent |
height | 35px |
min-width | 150px |
padding | 7px |
slot-gap | 5px |
font-weight | 300 |
line-height | 1 |
text-align | center |
cursor | default |
box-shadow | none |
border-radius | lkt-theme.$primary-border-radius |
transition | lkt-theme.$primary-transition |
font-size | lkt-theme.$primary-button-font-size |
font-family | lkt-theme.$primary-button-font-family |
Style generation
The following example will show you how to generate styles.
@use "node_modules/lkt-button/lkt-button";
@include lkt-button.generate();
Theme modifiers
If lkt-theme
is configured, the generate
mixin also will generate some colored styles if colors were configured in lkt-theme
.
These modifiers will be the way:
lkt-button-- lkt-button---dark lkt-button---darker lkt-button---light lkt-button---lighter
For example, if you already set up info color and info color dark, it will generate the following modifiers:
lkt-button--info lkt-button--info-dark
All lkt-theme
colors can generate a modifier but disabled (which generates styles if button is disabled) and focus (which is not intended for this component).
Some example could be:
lkt-button--info lkt-button--info-dark lkt-button--info-darker lkt-button--info-light lkt-button--info-lighter
lkt-button--success lkt-button--success-dark lkt-button--success-darker lkt-button--success-light lkt-button--success-lighter
lkt-button--warning lkt-button--warning-dark lkt-button--warning-darker lkt-button--warning-light lkt-button--warning-lighter
Using CSS Selectors in HTML
<lkt-button class="lkt-button--info">More info</lkt-button>
<lkt-button class="lkt-button--success-light">Confirm action</lkt-button>
The palette
prop
You can apply lkt-theme
modifiers with the palette prop this way:
<lkt-button palette="info">More info</lkt-button>
<!-- Is the same as: -->
<lkt-button class="lkt-button--info">More info</lkt-button>
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago