列表按鈕 React 組件

列表按鈕組件
ListButton 屬性
範例

列表按鈕旨在於列表 React 組件內使用。

列表按鈕組件

包含以下組件

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'
component	字串	'li'	組件的 HTML 元素
href	字串		按鈕的連結 `href` 屬性
linkComponent	字串	'a'	按鈕 HTML 元素
linkProps	任意		具有要傳遞給連結/按鈕的其他屬性（特性）的物件
target	字串		按鈕的連結 `target` 屬性
touchRipple	布林值	true	在 Material 主題中啟用觸碰漣漪效果
type	字串	未定義	按鈕的 `type` 屬性（如果以 `<button>` 搭配 `linkComponent: 'button'` 呈現）
value	任意		按鈕的 `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>
  );
}