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

ボタン Vue コンポーネント

ボタンコンポーネント

以下のコンポーネントが含まれています。

  • Button - 単一ボタン

ボタンプロパティ

名前型デフォルト値説明
clearbooleanundefined

ボタンをクリアスタイル（塗りつぶしのない色）にします。clearIosおよびclearMaterialプロパティを上書きします。

clearIosbooleanfalse

iOSテーマでボタンをクリアスタイル（塗りつぶしのない色）にします。

clearMaterialbooleanfalse

Materialテーマでボタンをクリアスタイル（塗りつぶしのない色）にします。

colorsobject

Tailwind CSSカラークラスを持つオブジェクト

colors.activeBgIosstring'active:bg-primary'
colors.activeBgMaterialstring''
colors.disabledBgstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorderstring'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledTextstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIosstring'active:bg-ios-primary-shade'
colors.fillActiveBgMaterialstring''
colors.fillBgIosstring'bg-primary'
colors.fillBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIosstring'text-white'
colors.fillTextMaterialstring'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipplestring'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIosstring'border-primary'
colors.outlineBorderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIosstring'bg-primary'
colors.tonalBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIosstring'text-primary'
colors.tonalTextMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipplestring'touch-ripple-primary'
componentstring'button'

コンポーネントのHTML要素

disabledbooleanfalse

ボタンを無効にします。

hrefstring

リンクのhref属性。指定された場合、<a>要素としてもレンダリングされます。

inlinebooleanfalse

ボタンをインラインにします（例：display: inline-flex）

largebooleanundefined

ボタンを大きくします。largeIosおよびlargeMaterialプロパティを上書きします。

largeIosbooleanfalse

iOSテーマでボタンを大きくします。

largeMaterialbooleanfalse

Materialテーマでボタンを大きくします。

outlinebooleanundefined

ボタンをアウトラインにします。outlineIosおよびoutlineMaterialプロパティを上書きします。

outlineIosbooleanfalse

iOSテーマでボタンをアウトラインにします。

outlineMaterialbooleanfalse

Materialテーマでボタンをアウトラインにします。

raisedbooleanundefined

ボタンを立体的にします（影付き）。raisedIosおよびraisedMaterialプロパティを上書きします。

raisedIosbooleanfalse

iOSテーマでボタンを立体的にします（影付き）。

raisedMaterialbooleanfalse

Materialテーマでボタンを立体的にします（影付き）。

roundedbooleanundefined

ボタンを丸くします。roundedIosおよびroundedMaterialプロパティを上書きします。

roundedIosbooleanfalse

iOSテーマでボタンを丸くします。

roundedMaterialbooleanfalse

Materialテーマでボタンを丸くします。

segmentedbooleanfalse

セグメントボタンとしてレンダリングします。<SegmentedButton>と同じです。

segmentedActivebooleanfalse

アクティブなセグメントボタンとしてレンダリングします。<SegmentedButton active>と同じです。

segmentedStrongbooleanfalse

強調表示されたセグメントボタンとしてレンダリングします。<SegmentedButton strong>と同じです。

smallbooleanundefined

ボタンを小さくします。smallIosおよびsmallMaterialプロパティを上書きします。

smallIosbooleanfalse

iOSテーマでボタンを小さくします。

smallMaterialbooleanfalse

Materialテーマでボタンを小さくします。

tonalbooleanundefined

ボタンをトーンスタイル（半透明の塗りつぶしの色）にします。tonalIosおよびtonalMaterialプロパティを上書きします。

tonalIosbooleanfalse

iOSテーマでボタンをトーンスタイル（半透明の塗りつぶしの色）にします。

tonalMaterialbooleanfalse

Materialテーマでボタンをトーンスタイル（半透明の塗りつぶしの色）にします。

touchRipplebooleantrue

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