按鈕 Vue 組件

按鈕組件
按鈕屬性
範例

按鈕組件

包含以下組件

Button - 單一按鈕

按鈕屬性

名稱	類型	預設值	說明
clear	布林值	未定義	將按鈕設為清除樣式（沒有填充顏色）。覆蓋 `clearIos` 和 `clearMaterial` 屬性
clearIos	布林值	布林值	在 iOS 主題中將按鈕設為清除樣式（沒有填充顏色）
clearMaterial	布林值	布林值	在 Material 主題中將按鈕設為清除樣式（沒有填充顏色）
colors	物件		包含 Tailwind CSS 顏色類別的物件
colors.activeBgIos	字串	'active:bg-primary'
colors.activeBgMaterial	字串	''
colors.disabledBg	字串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder	字串	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText	字串	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIos	字串	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	字串	''
colors.fillBgIos	字串	'bg-primary'
colors.fillBgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	字串	'text-white'
colors.fillTextMaterial	字串	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	字串	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	字串	'border-primary'
colors.outlineBorderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	字串	'text-primary'
colors.textMaterial	字串	'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIos	字串	'bg-primary'
colors.tonalBgMaterial	字串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos	字串	'text-primary'
colors.tonalTextMaterial	字串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple	字串	'touch-ripple-primary'
component	字串	字串	組件的 HTML 元素
disabled	布林值	布林值	布林值
href	字串		字串
inline	布林值	布林值	布林值
large	布林值	未定義	布林值
largeIos	布林值	布林值	布林值
largeMaterial	布林值	布林值	布林值
outline	布林值	未定義	布林值
outlineIos	布林值	布林值	布林值
outlineMaterial	布林值	布林值	布林值
raised	布林值	未定義	布林值
raisedIos	布林值	布林值	布林值
raisedMaterial	布林值	布林值	布林值
rounded	布林值	未定義	布林值
roundedIos	布林值	布林值	布林值
roundedMaterial	布林值	布林值	布林值
segmented	布林值	布林值	布林值
segmentedActive	布林值	布林值	布林值
segmentedStrong	布林值	布林值	布林值
small	布林值	未定義	布林值
smallIos	布林值	布林值	布林值
smallMaterial	布林值	布林值	布林值
tonal	布林值	未定義	布林值
tonalIos	布林值	布林值	布林值
tonalMaterial	布林值	布林值	布林值
touchRipple	布林值	布林值	在 Material 主題中啟用觸摸漣漪效果

範例

Buttons.vue

<template>
  <k-page>
    <k-navbar title="Buttons" />

    <k-block-title>Default Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button>Button</k-button>
        <k-button class="k-color-brand-red"> Button </k-button>
        <k-button>Button</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button outline>Outline</k-button>
        <k-button class="k-color-brand-red" outline> Outline </k-button>
        <k-button outline>Outline</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button clear>Clear</k-button>
        <k-button class="k-color-brand-red" clear> Clear </k-button>
        <k-button clear>Clear</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button tonal>Tonal</k-button>
        <k-button class="k-color-brand-red" tonal> Tonal </k-button>
        <k-button tonal>Tonal</k-button>
      </div>
    </k-block>

    <k-block-title>Rounded Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded>Button</k-button>
        <k-button rounded class="k-color-brand-green">Button</k-button>
        <k-button rounded>Button</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded outline> Outline </k-button>
        <k-button rounded outline class="k-color-brand-green">
          Outline
        </k-button>
        <k-button rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded clear> Clear </k-button>
        <k-button rounded clear class="k-color-brand-green"> Clear </k-button>
        <k-button rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Large Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large>Button</k-button>
        <k-button large class="k-color-brand-yellow">Button</k-button>
        <k-button large rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large outline> Outline </k-button>
        <k-button large outline class="k-color-brand-yellow">
          Outline
        </k-button>
        <k-button large rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large clear> Clear </k-button>
        <k-button large clear class="k-color-brand-yellow"> Clear </k-button>
        <k-button large rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Small Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small>Button</k-button>
        <k-button small>Button</k-button>
        <k-button small rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small outline> Outline </k-button>
        <k-button small outline> Outline </k-button>
        <k-button small rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small clear> Clear </k-button>
        <k-button small clear> Clear </k-button>
        <k-button small rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Raised Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised>Button</k-button>
        <k-button raised>Button</k-button>
        <k-button raised rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised outline> Outline </k-button>
        <k-button raised outline> Outline </k-button>
        <k-button raised rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised clear> Clear </k-button>
        <k-button raised clear> Clear </k-button>
        <k-button raised rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Disabled Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button disabled>Button</k-button>
        <k-button disabled outline>Outline</k-button>
        <k-button disabled clear>Clear</k-button>
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kButton,
    kBlock,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kButton,
      kBlock,
      kBlockTitle,
    },

  };
</script>