List Button Vue Component

List Button Components
ListButton Props
Examples

List Button is intended to be used inside of the List Vue Component.

List Button Components

There are following components included:

ListButton

ListButton Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.activeBg	string	'active:bg-primary'	List button pressed bg color
colors.text	string	'text-primary'	List button text color
colors.touchRipple	string	'touch-ripple-primary'	List button touch ripple color
component	string	'li'	Component's HTML Element
hairlines	boolean	true	Renders button outer hairlines (borders)
href	string		Button's link `href` attribute
linkComponent	string	'a'	Button HTML Element
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
target	string		Button's link `target` attribute
touchRipple	boolean	true	Enables touch ripple effect in Material theme
type	string	undefined	Button's `type` attribute (if rendered as `<button>` with `linkComponent: 'button'`)
value	any		Button's `type` attribute (if rendered as `<button>` with `linkComponent: 'button'`)

Examples

ListButton.vue

<template>
  <k-page>
    <k-navbar title="List Button" />

    <k-list>
      <k-list-button>Button 1</k-list-button>
      <k-list-button>Button 2</k-list-button>
      <k-list-button>Button 3</k-list-button>
    </k-list>

    <k-list inset>
      <k-list-button>Button 1</k-list-button>
      <k-list-button>Button 2</k-list-button>
      <k-list-button>Button 3</k-list-button>
    </k-list>
    <k-list inset>
      <k-list-button
        :colors="{
          text: 'text-red-500',
          activeBg: 'active:bg-red-500',
          touchRipple: 'touch-ripple-red-500',
        }"
      >
        Red Button
      </k-list-button>
    </k-list>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kList,
    kListButton,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kList,
      kListButton,
    },

  };
</script>