List Button is intended to be used inside of the List Vue Component.
There are following components included:
ListButton
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 | |
linkComponent | string | 'a' | Button HTML Element |
linkProps | any | Object with additional props (attributes) to pass to the Link/Button | |
target | string | Button's link | |
touchRipple | boolean | true | Enables touch ripple effect in Material theme |
type | string | undefined | Button's |
value | any | Button's |
<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>