ボタンSvelteコンポーネント

ボタンコンポーネント
ボタンプロパティ
例

ボタンコンポーネント

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

Button - シングルボタン

ボタンプロパティ

名前	タイプ	デフォルト	説明
clear	boolean	undefined	ボタンをクリアスタイル（塗りつぶしの色なし）にします。`clearIos`および`clearMaterial`プロパティを上書きします。
clearIos	boolean	false	iOSテーマでボタンをクリアスタイル（塗りつぶしの色なし）にします。
clearMaterial	boolean	false	Materialテーマでボタンをクリアスタイル（塗りつぶしの色なし）にします。
colors	object		Tailwind CSSカラークラスを含むオブジェクト
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
colors.disabledBg	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder	string	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText	string	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIos	string	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	string	''
colors.fillBgIos	string	'bg-primary'
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIos	string	'bg-primary'
colors.tonalBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos	string	'text-primary'
colors.tonalTextMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'button'	コンポーネントのHTML要素
disabled	boolean	false	ボタンを無効にします。
href	string		リンクの`href`属性。指定すると、`<a>`要素としてもレンダリングされます。
inline	boolean	false	ボタンをインラインにします（例：`display: inline-flex`）
large	boolean	undefined	ボタンを大きくします。`largeIos`および`largeMaterial`プロパティを上書きします。
largeIos	boolean	false	iOSテーマでボタンを大きくします。
largeMaterial	boolean	false	Materialテーマでボタンを大きくします。
outline	boolean	undefined	ボタンをアウトラインにします。`outlineIos`および`outlineMaterial`プロパティを上書きします。
outlineIos	boolean	false	iOSテーマでボタンをアウトラインにします。
outlineMaterial	boolean	false	Materialテーマでボタンをアウトラインにします。
raised	boolean	undefined	ボタンを立体的にします（影付き）。`raisedIos`および`raisedMaterial`プロパティを上書きします。
raisedIos	boolean	false	iOSテーマでボタンを立体的にします（影付き）。
raisedMaterial	boolean	false	Materialテーマでボタンを立体的にします（影付き）。
rounded	boolean	undefined	ボタンを丸くします。`roundedIos`および`roundedMaterial`プロパティを上書きします。
roundedIos	boolean	false	iOSテーマでボタンを丸くします。
roundedMaterial	boolean	false	Materialテーマでボタンを丸くします。
segmented	boolean	false	セグメントボタンとしてレンダリングします。`<SegmentedButton>`と同じです。
segmentedActive	boolean	false	アクティブなセグメントボタンとしてレンダリングします。`<SegmentedButton active>`と同じです。
segmentedStrong	boolean	false	強調表示されたセグメントボタンとしてレンダリングします。`<SegmentedButton strong>`と同じです。
small	boolean	undefined	ボタンを小さくします。`smallIos`および`smallMaterial`プロパティを上書きします。
smallIos	boolean	false	iOSテーマでボタンを小さくします。
smallMaterial	boolean	false	Materialテーマでボタンを小さくします。
tonal	boolean	undefined	ボタンをトーンスタイル（半透明の塗りつぶしの色付き）にします。`tonalIos`および`tonalMaterial`プロパティを上書きします。
tonalIos	boolean	false	iOSテーマでボタンをトーンスタイル（半透明の塗りつぶしの色付き）にします。
tonalMaterial	boolean	false	Materialテーマでボタンをトーンスタイル（半透明の塗りつぶしの色付き）にします。
touchRipple	boolean	true	Materialテーマでタッチリップル効果を有効にします。
onClick	function(e)		`click`イベントハンドラ

例

Buttons.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

</script>

<Page>
  <Navbar title="Buttons" />

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

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

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

  <BlockTitle>Small Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button small>Button</Button>
      <Button small>Button</Button>
      <Button small rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button small outline>Outline</Button>
      <Button small outline>Outline</Button>
      <Button small rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button small clear>Clear</Button>
      <Button small clear>Clear</Button>
      <Button small rounded clear>Clear</Button>
    </div>
  </Block>

  <BlockTitle>Raised Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised>Button</Button>
      <Button raised>Button</Button>
      <Button raised rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised outline>Outline</Button>
      <Button raised outline>Outline</Button>
      <Button raised rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised clear>Clear</Button>
      <Button raised clear>Clear</Button>
      <Button raised rounded clear>Clear</Button>
    </div>
  </Block>

  <BlockTitle>Disabled Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button disabled>Button</Button>
      <Button disabled outline>Outline</Button>
      <Button disabled clear>Clear</Button>
    </div>
  </Block>
</Page>