リンクVueコンポーネント

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

リンクコンポーネント

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

f7-link です。

リンクのプロパティ

Prop	Type	Default	Description
<f7-link> properties
no-link-class	boolean		link "クラスを削除します。
tab-link	string boolean		タブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定した場合）。
tab-link-active	boolean		このタブリンクをアクティブにします
text	string		リンクテキスト
badge	string number		バッジの数
badge-color	string		バッジの色を指定します。デフォルトの色のいずれかです。
icon-only	boolean		ナビバー/ツールバーの中でアイコンのみで使用する場合に有効にする
tooltip	string		リンク tooltip リンクのホバー/プレス時に表示するテキスト。
tooltip-trigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`、`click`、`manual`のいずれかです。
<f7-link> Smart Select related properties
smart-select	boolean	false	スマートセレクトの動作を有効にする
smart-select-params	object		スマートセレクトのパラメータを持つオブジェクト。
<f7-link> icon related properties
icon-size	string number		アイコンサイズ（px
icon-color	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
icon-f7	string		F7アイコンのフォントアイコンの名前
icon-material	string		マテリアルアイコンのフォントアイコンの名称
icon-ios	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
icon-md	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
icon-aurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
icon-badge	string number		アイコンにバッジを追加（Tabbarのアイコンで使用することを想定しています
<f7-link> navigation/router related properties
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
open-in	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reload-current	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reload-previous	boolean		履歴の前のページをルートからの新しいページで置き換える
reload-all	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reload-detail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignore-cache	boolean		キャッシングを無視する
route-tab-id	string		Routable Tab id
route-props	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
prevent-router	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<f7-link> action related properties
panel-open	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panel-close	string boolean		クリックでパネルを閉じる
panel-toggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actions-open	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actions-close	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popup-open	string boolean		クリック時に開くポップアップのCSSセレクタ
popup-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popover-open	string boolean		クリックで開くポップオーバーのCSSセレクタ
popover-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheet-open	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheet-close	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
login-screen-open	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
login-screen-close	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortable-enable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortable-disable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortable-toggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbar-enable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbar-disable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbar-toggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbar-clear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
card-open	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
card-close	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
card-prevent-open	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menu-close	boolean		クリックするとメニューのドロップダウンを閉じる

リンクイベント

Event	Description
<f7-link> events
click	Event will be triggered after click on a link

例

ナビゲーションリンク

<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>

タブリンク

<!-- タブ -->
<f7-tabs>
  <f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
  <f7-tab id="tab-2">Tab 2</f7-tab>
</f7-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>

ルーティング可能なタブ

<!-- タブ -->
<f7-tabs>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-2"></f7-tab>
</f7-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>