列表按鈕 Svelte 組件

列表按鈕組件
ListButton 屬性
範例

列表按鈕旨在列表 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>`）
onClick	函式(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>