列表按鈕 Vue 組件

列表按鈕組件
ListButton 屬性
範例

列表按鈕旨在於列表 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	any		要傳遞給連結/按鈕的其他屬性（特性）的物件
target	字串		按鈕的連結 `target` 屬性
touchRipple	布林值	true	在 Material 主題中啟用觸控漣漪效果
type	字串	未定義	按鈕的 `type` 屬性（如果使用 `linkComponent: 'button'` 呈現為 `<button>`）
value	any		按鈕的 `type` 屬性（如果使用 `linkComponent: 'button'` 呈現為 `<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>