For the complete documentation index, see llms.txt. This page is also available as Markdown.

List Button

ListButton Props

Name
Type
Default
Description

colors

object

Object with Tailwind CSS colors classes

colors.activeBgIos

string

'active:bg-primary active:bg-opacity-15'

colors.activeBgMaterial

string

''

colors.textIos

string

'text-primary'

colors.textMaterial

string

'text-md-light-primary dark:text-md-dark-primary'

colors.touchRipple

string

'touch-ripple-primary'

component

string

'li'

Component's HTML Element

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

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

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

    <i-list inset>
      <i-list-button>Button 1</i-list-button>
      <i-list-button>Button 2</i-list-button>
      <i-list-button>Button 3</i-list-button>
    </i-list>
    <i-list inset>
      <i-list-button class="k-color-brand-red"> Red Button </i-list-button>
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iList,
    iListButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iList,
      iListButton,
    },

  };
</script>

Last updated