列表按钮 Svelte 组件

列表按钮组件
ListButton 属性
示例

列表按钮组件

以下组件包含在内

ListButton

ListButton 属性

名称	类型	默认值	描述
颜色	对象		带有 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` 属性
touchRipple	布尔值	真的	在 Material 主题中启用触控涟漪效果
类型	字符串	未定义	按钮的 `type` 属性（如果使用 `linkComponent: 'button'` 渲染为 `<button>`）
价值	任何		按钮的 `type` 属性（如果使用 `linkComponent: 'button'` 渲染为 `<button>`）
onClick	function(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>