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

    List Button React Componentは、Framework7のList Button要素を表しています。これらは、List React Componentの内部で使用されることを意図しています。

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

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

    • ListButton(リストボタン

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

    PropTypeDefaultDescription
    titlestringボタンの内側のテキスト
    textstringボタンの内側のテキストで、タイトルと同じです。
    tabLinkstring/booleanタブリンクを有効にし、対象となるタブの CSS セレクタを指定します(文字列で指定する場合)。
    tabLinkActivebooleanこのタブリンクをアクティブにする
    targetstringリンク先の属性
    tooltipstringリストボタンの tooltip ボタンのホバー/プレス時に表示されるテキスト
    tooltipTriggerstringhoverどのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。
    <ListButton> navigation/router related properties
    hrefstring
    boolean
    #ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    openInstringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popuploginScreensheetpopoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reloadCurrentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reloadPreviousboolean履歴の前のページをルートからの新しいページで置き換える
    reloadAllboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reloadDetailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignoreCachebooleanキャッシングを無視する
    routeTabIdstringRoutable Tab id
    routePropsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    preventRouterbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <ListButton> action related properties
    panelOpenstring
    boolean
    クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panelClosestring
    boolean
    クリックでパネルを閉じる
    panelTogglestring
    boolean
    クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actionsOpenstring
    boolean
    クリックされたときに開くアクション・シートの CSS セレクタ
    actionsClosestring
    boolean
    クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popupOpenstring
    boolean
    クリック時に開くポップアップのCSSセレクタ
    popupClosestring
    boolean
    クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popoverOpenstring
    boolean
    クリックで開くポップオーバーのCSSセレクタ
    popoverClosestring
    boolean
    クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheetOpenstring
    boolean
    クリックで開くシートモーダルのCSSセレクタ
    sheetClosestring
    boolean
    クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    loginScreenOpenstring
    boolean
    クリックしたときに開くログイン画面のCSSセレクタ
    loginScreenClosestring
    boolean
    クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortableEnablestring
    boolean
    クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortableDisablestring
    boolean
    クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortableTogglestring
    boolean
    クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている/閉じられているソート可能なリストをトグルするためのboolean特性
    searchbarEnablestring
    boolean
    クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbarDisablestring
    boolean
    クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbarTogglestring
    boolean
    クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbarClearstring
    boolean
    クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    cardOpenstring
    boolean
    クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    cardClosestring
    boolean
    クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    cardPreventOpenbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menuClosebooleanクリックするとメニューのドロップダウンを閉じる

    ボタンのイベント一覧

    EventDescription
    <ListButton> events
    clickEvent will be triggered after click on a button

    Examples

    import React from 'react';
    import { Page, Navbar, List, ListButton } from 'framework7-react';
    
    export default () => (
      
        
      <Page>
        <Navbar title="List Button" />
        <List>
          <ListButton title="List Button 1" />
          <ListButton title="List Button 2" />
          <ListButton title="List Button 3" />
        </List>
    
        <List inset>
          <ListButton title="List Button 1" />
          <ListButton title="List Button 2" />
          <ListButton title="List Button 3" />
        </List>
    
        <List inset>
          <ListButton title="Red List Button" color="red" />
          <ListButton title="Green List Button" color="green" />
          <ListButton title="Orange List Button" color="orange" />
        </List>
      </Page>
        
      
    );