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

リストボタン React コンポーネントは、Framework7 のリストボタン要素を表します。これらはリスト React コンポーネント内で使用することを意図しています。

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

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

ListButton

リストボタンのプロパティ

プロパティ	タイプ	デフォルト	説明
title	string		ボタンの内部テキスト
text	string		ボタンの内部テキスト。`title` と同じです。
tabLink	string/boolean		タブリンクを有効にし、ターゲットタブの CSS セレクターを指定します（文字列として指定した場合）
tabLinkActive	boolean		このタブリンクをアクティブにします
target	string		リンクの target 属性
tooltip	string		リストボタンのツールチップテキスト。ボタンにカーソルを合わせるか押すと表示されます。
tooltipTrigger	string	hover	ツールチップをトリガー（開く）方法を定義します。 `hover`、`click`、または `manual` を指定できます。
<ListButton> ナビゲーション/ルーター関連のプロパティ
href	string boolean	#	ロードするページの URL。ブール値 `href="false"` の場合、`href` タグは追加されません。
target	string		リンクの target 属性の値。例：`_blank`、`_self` など。
view	string		ページをロードするビューの CSS セレクター。または、現在のビューにロードする場合は `current` を指定します。
external	boolean		Framework7 のリンククリックハンドラをバイパスします。
back	boolean		戻るナビゲーションリンクを有効にします。
openIn	string		ページルートをモーダルまたはパネルとして開くことができます。 `popup`、`loginScreen`、`sheet`、`popover`、または `panel` を指定できます。
force	boolean		履歴の前のページを無視して、ページを強制的にロードします（`back` プロパティと併用します）。
reloadCurrent	boolean		現在アクティブなページの代わりに新しいページをリロードします。
reloadPrevious	boolean		履歴の前のページをルートからの新しいページに置き換えます。
reloadAll	boolean		新しいページをロードし、履歴と DOM から以前のすべてのページを削除します。
reloadDetail	boolean		マスター詳細ビューの詳細ページをリロードします。
animate	boolean		ページアニメーションを無効にします。
transition	string		カスタムページトランジションの名前。
ignoreCache	boolean		キャッシュを無視します。
routeTabId	string		ルーティング可能なタブ ID
routeProps	object		ターゲットルートコンポーネントに渡される追加のプロパティを持つオブジェクト。
preventRouter	boolean	false	設定されている場合、Framework7 ルーターによって処理されません。
<ListButton> アクション関連のプロパティ
panelOpen	string boolean		クリック時に開くパネルの CSS セレクター。DOM に左右のパネルしかない場合は、`left` または `right` を指定できます。
panelClose	string boolean		クリック時にパネルを閉じます。
panelToggle	string boolean		クリック時に切り替えるパネルの CSS セレクター。DOM に左右のパネルしかない場合は、`left` または `right` を指定できます。
actionsOpen	string boolean		クリック時に開くアクションシートの CSS セレクター。
actionsClose	string boolean		クリック時に閉じるアクションシートの CSS セレクター。または、現在開いているアクションシートを閉じるブール値プロパティ。
popupOpen	string boolean		クリック時に開くポップアップの CSS セレクター。
popupClose	string boolean		クリック時に閉じるポップアップの CSS セレクター。または、現在開いているポップアップを閉じるブール値プロパティ。
popoverOpen	string boolean		クリック時に開くポップオーバーの CSS セレクター。
popoverClose	string boolean		クリック時に閉じるポップオーバーの CSS セレクター。または、現在開いているポップオーバーを閉じるブール値プロパティ。
sheetOpen	string boolean		クリック時に開くシートモーダルの CSS セレクター。
sheetClose	string boolean		クリック時に閉じるシートモーダルの CSS セレクター。または、現在開いているシートモーダルを閉じるブール値プロパティ。
loginScreenOpen	string boolean		クリック時に開くログイン画面の CSS セレクター。
loginScreenClose	string boolean		クリック時に閉じるログイン画面の CSS セレクター。または、現在開いているログイン画面を閉じるブール値プロパティ。
sortableEnable	string boolean		クリック時に有効にするソート可能リストの CSS セレクター。
sortableDisable	string boolean		クリック時に無効にするソート可能リストの CSS セレクター。または、現在開いているソート可能リストを閉じるブール値プロパティ。
sortableToggle	string boolean		クリック時に切り替えるソート可能リストの CSS セレクター。または、現在開いている/閉じているソート可能リストを切り替えるブール値プロパティ。
searchbarEnable	string boolean		クリック時に有効にする展開可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを有効にするブール値プロパティ。
searchbarDisable	string boolean		クリック時に無効にする展開可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを無効にするブール値プロパティ。
searchbarToggle	string boolean		クリック時に切り替える展開可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを切り替えるブール値プロパティ。
searchbarClear	string boolean		クリック時にクリアする展開可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーをクリアするブール値プロパティ。
cardOpen	string boolean		クリック時に開く展開可能なカードの CSS セレクター。または、最初に見つかった展開可能なカードを開くブール値。
cardClose	string boolean		クリック時に閉じる展開可能なカードの CSS セレクター。または、現在開いている展開可能なカードを閉じるブール値プロパティ。
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の展開可能なカードは開きません。

リストボタンのイベント

イベント	説明
<ListButton> イベント
click	ボタンをクリックした後、イベントがトリガーされます。

例

list-button.jsx

import React from 'react';
import { Navbar, Page, List, ListButton } from 'framework7-react';

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

      <List inset strong>
        <ListButton title="List Button 1" />
        <ListButton title="List Button 2" />
        <ListButton title="List Button 3" />
      </List>
      <List inset strong>
        <ListButton title="Large Red Button" color="red" />
      </List>
    </Page>
  );
};

このドキュメントを改善する

このページの内容

リストボタンコンポーネント
リストボタンのプロパティ
リストボタンのイベント
例