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

Link Vue コンポーネント

Link は、ナビゲーション、カスタムアクション、タブの切り替え、パネルの開閉などを行うためのリンクを作成するための主要なコンポーネントです。

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

プロパティ型デフォルト説明
<f7-link> プロパティ
no-link-classブール値"link" クラスを削除します
tab-link文字列
ブール値		タブリンクを有効にし、ターゲットタブのCSSセレクタを指定します（文字列として指定した場合）
tab-link-activeブール値このタブリンクをアクティブにします
text文字列リンクテキスト
badge文字列
数値		バッジ数
badge-color文字列バッジの色。 デフォルトの色 のいずれか
icon-onlyブール値ナビゲーションバー/ツールバーでアイコンのみを使用する場合に有効
tooltip文字列リンクにホバー/押下時に表示される ツールチップ テキスト
tooltip-trigger文字列hoverツールチップのトリガー（開く）方法を定義します。hover、click、またはmanualを指定できます。
<f7-link> スマートセレクト関連プロパティ
smart-selectブール値falseスマートセレクト動作を有効にします
smart-select-paramsオブジェクトスマートセレクトパラメータを含むオブジェクト
<f7-link> アイコン関連プロパティ
icon-size文字列
数値		px単位のアイコンサイズ
icon-color文字列アイコンの色。 デフォルトの色 のいずれか
icon文字列カスタムアイコンクラス
icon-f7文字列F7 Iconsフォントアイコンの名前
icon-material文字列Material Iconsフォントアイコンの名前
icon-ios文字列iOSテーマが使用されている場合に使用されるアイコン。アイコンファミリーとアイコン名をコロンで区切ったもの、例：f7:house
icon-md文字列MDテーマが使用されている場合に使用されるアイコン。アイコンファミリーとアイコン名をコロンで区切ったもの、例：material:home
icon-badge文字列
数値		アイコンにバッジを追加します（タブバーのアイコンで使用することを目的としています）
<f7-link> ナビゲーション/ルーター関連プロパティ
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-link> アクション関連プロパティ
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-link> イベント
clickリンクをクリックした後、イベントが発生します。

例

ナビゲーションリンク

<f7-link href="/about/">About</f7-link>

戻るナビゲーションリンク

<f7-link back>Back</f7-link>

ルーターパラメータ付き

<f7-link href="/about/" :animate="false" :ignore-cache="true">About</f7-link>

外部リンク

<f7-link href="http://google.com" external>Google</f7-link>

タブリンク

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
  <f7-tab id="tab-2">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link="#tab-1" tab-link-active>Show Tab 1</f7-link>
<f7-link tab-link="#tab-2">Show Tab 2</f7-link>

ルーティング可能なタブ

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-2"></f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>

パネルの開閉

<f7-link panel-open="left">Open Left Panel</f7-link>
<f7-link panel-close>Close Panel</f7-link>

ポップアップの開閉

<f7-link popup-open="#my-popup">Open Popup</f7-link>
<f7-link popup-close="#my-popup">Close Popup</f7-link>

アイコンと色付き

<f7-link icon-f7="house" text="Home" color="red"></f7-link>
このドキュメントを改善する
このページについて