v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

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

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

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

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

    • f7-list-button です。

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

    PropTypeDefaultDescription
    titlestringボタンの内側のテキスト
    textstringボタンの内側のテキストで、titleと同じです。
    tab-linkstring/booleanタブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定する場合）。
    tab-link-activebooleanこのタブリンクをアクティブにする
    targetstringリンク先の属性
    tooltipstringリストボタンの tooltip ボタンのホバー/プレス時に表示されるテキスト
    tooltip-triggerstringhoverどのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。
    <f7-list-button> navigation/router related properties
    hrefstring
    boolean    		#ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank、_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent。
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    open-instringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popup、loginScreen、sheet、popoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reload-currentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reload-previousboolean履歴の前のページをルートからの新しいページで置き換える
    reload-allboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reload-detailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignore-cachebooleanキャッシングを無視する
    route-tab-idstringRoutable Tab id
    route-propsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    prevent-routerbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <f7-list-button> action related properties
    panel-openstring
    boolean    		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panel-closestring
    boolean    		クリックでパネルを閉じる
    panel-togglestring
    boolean    		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actions-openstring
    boolean    		クリックされたときに開くアクション・シートの CSS セレクタ
    actions-closestring
    boolean    		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popup-openstring
    boolean    		クリック時に開くポップアップのCSSセレクタ
    popup-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popover-openstring
    boolean    		クリックで開くポップオーバーのCSSセレクタ
    popover-closestring
    boolean    		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheet-openstring
    boolean    		クリックで開くシートモーダルのCSSセレクタ
    sheet-closestring
    boolean    		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    login-screen-openstring
    boolean    		クリックしたときに開くログイン画面のCSSセレクタ
    login-screen-closestring
    boolean    		クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortable-enablestring
    boolean    		クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortable-disablestring
    boolean    		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortable-togglestring
    boolean    		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
    searchbar-enablestring
    boolean    		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbar-disablestring
    boolean    		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbar-togglestring
    boolean    		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbar-clearstring
    boolean    		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    card-openstring
    boolean    		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    card-closestring
    boolean    		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    card-prevent-openbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menu-closebooleanクリックするとメニューのドロップダウンを閉じる

    ボタンのイベント一覧

    EventDescription
    <f7-list-button> events
    clickEvent will be triggered after click on a button

    Examples

    <template>
<f7-page>
  <f7-navbar title="List Button"></f7-navbar>
  <f7-list>
    <f7-list-button title="List Button 1"></f7-list-button>
    <f7-list-button title="List Button 2"></f7-list-button>
    <f7-list-button title="List Button 3"></f7-list-button>
  </f7-list>
  <f7-list inset>
    <f7-list-button title="List Button 1"></f7-list-button>
    <f7-list-button title="List Button 2"></f7-list-button>
    <f7-list-button title="List Button 3"></f7-list-button>
  </f7-list>
  <f7-list inset>
    <f7-list-button title="Red List Button" color="red"></f7-list-button>
    <f7-list-button title="Green List Button" color="green"></f7-list-button>
    <f7-list-button title="Orange List Button" color="orange"></f7-list-button>
  </f7-list>
</f7-page>
</template>