列表按钮 Vue 组件

列表按钮组件
ListButton 属性
示例

ListButton 旨在用于 List Vue 组件中。

列表按钮组件

包含以下组件

ListButton

ListButton 属性

名称	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.activeBgIos	字符串	'active:bg-primary active:bg-opacity-15'
colors.activeBgMaterial	字符串	''
colors.textIos	字符串	'text-primary'
colors.textMaterial	字符串	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	字符串	'touch-ripple-primary'
component	字符串	'li'	组件的 HTML 元素
href	字符串		按钮的链接 `href` 属性
linkComponent	字符串	'a'	按钮 HTML 元素
linkProps	任何		包含要传递给链接/按钮的附加属性（属性）的对象
target	字符串		按钮的链接 `target` 属性
touchRipple	布尔值	true	在 Material 主题中启用触摸涟漪效果
type	字符串	未定义	按钮的 `type` 属性（如果渲染为 `<button>` 且 `linkComponent: 'button'`）
value	任何		按钮的 `type` 属性（如果渲染为 `<button>` 且 `linkComponent: 'button'`）

示例

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>