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

リストボタンSvelteコンポーネント

ListButtonは、List Svelteコンポーネント内で使用するように設計されています。

リストボタンコンポーネント

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

  • 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'
href文字列

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

linkComponent文字列'a'

ボタンHTML要素

linkProps任意

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

target文字列

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

touchRippleブール値true

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

type文字列未定義

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

value任意

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

onClickfunction(e)

`click`イベントハンドラ

例

ListButton.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    List,
    ListButton,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="List Button" />


  <List>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>


  <List inset>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>
  <List inset>
    <ListButton className="k-color-brand-red">Red Button</ListButton>
  </List>
</Page>
コードライセンス MIT.
2022 © Konsta UI by nolimits4web.