スポンサースポンサーになる

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

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

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

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

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

プロパティタイプデフォルト説明
title文字列ボタンの内部テキスト
text文字列ボタンの内部テキスト。titleと同じです
tab-link文字列/真偽値タブリンクを有効にし、ターゲットタブの CSS セレクターを指定します（文字列として指定した場合）
tab-link-active真偽値このタブリンクをアクティブにします
target文字列リンクの target 属性
tooltip文字列リストボタンのツールチップテキスト。ボタンにホバー/プレスしたときに表示されます
tooltip-trigger文字列hoverツールチップをトリガー（開く）方法を定義します。 hover、click、またはmanualを指定できます
<f7-list-button> ナビゲーション/ルーター関連のプロパティ
href文字列
真偽値		#読み込むページの URL。真偽値のhref="false"の場合、hrefタグは追加されません
target文字列リンクの target 属性の値。例：_blank、_selfなど
view文字列ページを読み込むビューの CSS セレクター。または、現在のビューに読み込む場合はcurrentを指定します。
external真偽値Framework7 のリンククリックハンドラをバイパスします
back真偽値戻るナビゲーションリンクを有効にします
open-in文字列ページルートをモーダルまたはパネルとして開くことができます。 popup、loginScreen、sheet、popover、またはpanelを指定できます
force真偽値履歴の前のページを無視して、ページを強制的に読み込みます（backプロパティと一緒に使用します）
reload-current真偽値現在アクティブなページではなく、新しいページをリロードします
reload-previous真偽値履歴の前のページを、ルートからの新しいページに置き換えます
reload-all真偽値新しいページを読み込み、履歴と DOM から以前のすべてのページを削除します
reload-detail真偽値マスター詳細ビューで詳細ページをリロードします
animate真偽値ページアニメーションを無効にします
transition文字列カスタムページトランジションの名前
ignore-cache真偽値キャッシュを無視します
route-tab-id文字列ルーティング可能なタブ ID
route-propsオブジェクトターゲットルートコンポーネントに渡される追加のプロパティを持つオブジェクト
prevent-router真偽値false設定されている場合、Framework7 ルーターによって処理されません
<f7-list-button> アクション関連のプロパティ
panel-open文字列
真偽値		クリック時に開くパネルの CSS セレクター。DOM に左または右のパネルのみがある場合は、leftまたはrightにすることもできます。
panel-close文字列
真偽値		クリック時にパネルを閉じます
panel-toggle文字列
真偽値		クリック時に切り替えるパネルの CSS セレクター。DOM に左または右のパネルのみがある場合は、leftまたはrightにすることもできます。
actions-open文字列
真偽値		クリック時に開くアクションシートの CSS セレクター
actions-close文字列
真偽値		クリック時に閉じるアクションシートの CSS セレクター。または、現在開いているアクションシートを閉じる真偽値プロパティ
popup-open文字列
真偽値		クリック時に開くポップアップの CSS セレクター
popup-close文字列
真偽値		クリック時に閉じるポップアップの CSS セレクター。または、現在開いているポップアップを閉じる真偽値プロパティ
popover-open文字列
真偽値		クリック時に開くポップオーバーの CSS セレクター
popover-close文字列
真偽値		クリック時に閉じるポップオーバーの CSS セレクター。または、現在開いているポップオーバーを閉じる真偽値プロパティ
sheet-open文字列
真偽値		クリック時に開くシートモーダルの CSS セレクター
sheet-close文字列
真偽値		クリック時に閉じるシートモーダルの CSS セレクター。または、現在開いているシートモーダルを閉じる真偽値プロパティ
login-screen-open文字列
真偽値		クリック時に開くログイン画面の CSS セレクター
login-screen-close文字列
真偽値		クリック時に閉じるログイン画面の CSS セレクター。または、現在開いているログイン画面を閉じる真偽値プロパティ
sortable-enable文字列
真偽値		クリック時に有効にするソート可能リストの CSS セレクター
sortable-disable文字列
真偽値		クリック時に無効にするソート可能リストの CSS セレクター。または、現在開いているソート可能リストを閉じる真偽値プロパティ
sortable-toggle文字列
真偽値		クリック時に切り替えるソート可能リストの CSS セレクター。または、現在開いている/閉じているソート可能リストを切り替える真偽値プロパティ
searchbar-enable文字列
真偽値		クリック時に有効にする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを有効にする真偽値プロパティ
searchbar-disable文字列
真偽値		クリック時に無効にする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを無効にする真偽値プロパティ
searchbar-toggle文字列
真偽値		クリック時に切り替える拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを切り替える真偽値プロパティ
searchbar-clear文字列
真偽値		クリック時にクリアする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーをクリアする真偽値プロパティ
card-open文字列
真偽値		クリック時に開く拡張可能なカードの CSS セレクター。または、最初に見つかった拡張可能なカードを開く真偽値
card-close文字列
真偽値		クリック時に閉じる拡張可能なカードの CSS セレクター。または、現在開いている拡張可能なカードを閉じる真偽値プロパティ
card-prevent-open真偽値このプロパティを持つ要素をクリックしても、その親の拡張可能なカードは開きません

リストボタンのイベント

イベント説明
<f7-list-button> イベント
clickボタンをクリックした後にイベントがトリガーされます

例

list-button.vue
<template>
  <f7-page>
    <f7-navbar title="List Button"></f7-navbar>

    <f7-list inset strong>
      <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 strong>
      <f7-list-button title="Large Red Button" color="red"></f7-list-button>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7List, f7ListButton } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListButton,
  },
  setup() {},
};
</script>
このドキュメントを改善する
このページの内容