🔥 新しいプロジェクトのご紹介 t0ggles -究極のプロジェクト管理ツール！ 🔥

リストボタン 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任意

リンク/ボタンに渡す追加のプロパティ（属性）を含むオブジェクト

target文字列

ボタンのリンク `target` 属性

touchRippleブール値true

マテリアルテーマでタッチリップル効果を有効にします。

type文字列未定義

ボタンの `type` 属性（`linkComponent: 'button'` で `<button>` としてレンダリングする場合）

value任意

ボタンの `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>
ライセンス MIT.
2022 © Konsta UI by nolimits4web.