2.0.10 • Published 5 months ago

lkt-button v2.0.10

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

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

OptionDefault value
border-width1px
border-stylesolid
border-color#ddd
color#333
backgroundtransparent
height35px
min-width150px
padding7px
slot-gap5px
font-weight300
line-height1
text-aligncenter
cursordefault
box-shadownone
border-radiuslkt-theme.$primary-border-radius
transitionlkt-theme.$primary-transition
font-sizelkt-theme.$primary-button-font-size
font-familylkt-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>
2.0.3

5 months ago

2.0.2

5 months ago

2.0.5

5 months ago

2.0.4

5 months ago

2.0.7

5 months ago

2.0.6

5 months ago

2.0.9

5 months ago

2.0.8

5 months ago

2.0.1

5 months ago

2.0.0

5 months ago

1.2.16

9 months ago

1.2.17

8 months ago

1.2.18

8 months ago

1.2.19

6 months ago

1.3.1

6 months ago

1.3.0

6 months ago

1.2.20

6 months ago

2.0.10

5 months ago

1.2.13

9 months ago

1.2.14

9 months ago

1.2.15

9 months ago

1.2.12

9 months ago

1.2.11

9 months ago

1.2.10

9 months ago

1.2.0

11 months ago

1.2.8

10 months ago

1.2.7

10 months ago

1.2.6

10 months ago

1.2.5

10 months ago

1.2.4

10 months ago

1.2.3

10 months ago

1.2.2

10 months ago

1.2.1

11 months ago

1.2.9

10 months ago

1.1.23

11 months ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.16

1 year ago

1.1.15

1 year ago

1.1.14

1 year ago

1.1.13

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

1.1.22

1 year ago

1.1.21

1 year ago

1.1.20

1 year ago

1.1.10

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.17

1 year ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.11

2 years ago

1.0.10

3 years ago

1.0.9

3 years ago