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

リストボタンコンポーネント
ListButton Props
例

リストボタンはリスト React コンポーネント内で使用することを想定しています。

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

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

ListButton

ListButton Props

名前	タイプ	デフォルト	説明
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	マテリアルテーマでタッチリップルエフェクトを有効にします
type	文字列	未定義	ボタンの `type` 属性 (`linkComponent: 'button'` で `<button>` としてレンダリングされる場合)
value	任意		ボタンの `type` 属性 (`linkComponent: 'button'` で `<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>
  );
}