列表按钮 React 组件

列表按钮组件
ListButton 属性
示例

ListButton 旨在用于 List React 组件中。

列表按钮组件

包含以下组件

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'
组件	字符串	'li'	组件的 HTML 元素
href	字符串		按钮的链接 `href` 属性
linkComponent	字符串	'a'	按钮 HTML 元素
linkProps	任何		传递给链接/按钮的其他属性（属性）的对象
目标	字符串		按钮的链接 `target` 属性
touchRipple	布尔值	真的	在 Material 主题中启用触摸涟漪效果
类型	字符串	未定义	按钮的 `type` 属性（如果作为 `<button>` 渲染，使用 `linkComponent: 'button'`）
价值	任何		按钮的 `type` 属性（如果作为 `<button>` 渲染，使用 `linkComponent: 'button'`）

示例

ListButton.jsx

import React from 'react';
import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/react';

export default function ListButtonPage() {
  return (
    <Page>
      <Navbar
        title="List Button"
        />

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

      <List inset strong>
        <ListButton>Button 1</ListButton>
        <ListButton>Button 2</ListButton>
        <ListButton>Button 3</ListButton>
      </List>
      <List inset strong>
        <ListButton className="k-color-brand-red">Red Button</ListButton>
      </List>
    </Page>
  );
}