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.activeBgstring'active:bg-primary'

List button pressed bg color

colors.textstring'text-primary'

List button text color

colors.touchRipplestring'touch-ripple-primary'

List button touch ripple color

componentstring'li'

Component's HTML Element

hairlinesbooleantrue

Renders button outer hairlines (borders)

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>
<twm-page>
<twm-navbar title="List Button" />
<twm-list>
<twm-list-button>Button 1</twm-list-button>
<twm-list-button>Button 2</twm-list-button>
<twm-list-button>Button 3</twm-list-button>
</twm-list>
<twm-list inset>
<twm-list-button>Button 1</twm-list-button>
<twm-list-button>Button 2</twm-list-button>
<twm-list-button>Button 3</twm-list-button>
</twm-list>
<twm-list inset>
<twm-list-button
:colors="{
text: 'text-red-500',
activeBg: 'active:bg-red-500',
touchRipple: 'touch-ripple-red-500',
}"
>
Red Button
</twm-list-button>
</twm-list>
</twm-page>
</template>
<script>
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmList,
twmListButton,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmList,
twmListButton,
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.