🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

List Button Vue Component

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

List Button Components

There are following components included:

  • ListButton

ListButton Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-primary active:bg-opacity-15'
colors.activeBgMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipplestring'touch-ripple-primary'
componentstring'li'

Component's HTML Element

hrefstring

Button's link href attribute

linkComponentstring'a'

Button HTML Element

linkPropsany

Object with additional props (attributes) to pass to the Link/Button

targetstring

Button's link target attribute

touchRipplebooleantrue

Enables touch ripple effect in Material theme

typestringundefined

Button's type attribute (if rendered as <button> with linkComponent: 'button')

valueany

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 class="k-color-brand-red"> 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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.