Link React Component

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

リンクコンポーネント

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

Link (リンク)

リンクのプロパティ

Prop	Type	Default	Description
<Link> properties
noLinkClass	boolean		link "クラスを削除します。
tabLink	string boolean		タブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定した場合）。
tabLinkActive	boolean		このタブリンクをアクティブにします。
text	string		リンクテキスト
badge	string number		バッジの数
badgeColor	string		バッジの色を指定します。デフォルトの色のいずれかを指定します。
iconOnly	boolean		ナビバー/ツールバーの中でアイコンのみで使用する場合に有効にする
tooltip	string		リンク tooltip リンクのホバー/プレス時に表示するテキスト。
tooltipTrigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`、`click`、`manual`のいずれかです。
<Link> Smart Select related properties
smartSelect	boolean	false	スマートセレクトの動作を有効にする
smartSelectParams	object		スマートセレクトのパラメータを持つオブジェクト。
<Link> icon related properties
iconSize	string number		アイコンサイズ(px)
iconColor	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
iconF7	string		F7アイコンのフォントアイコンの名前
iconMaterial	string		マテリアルアイコンのフォントアイコンの名称
iconIos	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
iconMd	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
iconAurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
iconBadge	string number		アイコンにバッジを追加（Tabbarのアイコンで使用することを想定しています
<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		バックナビゲーションリンクを有効にする
openIn	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reloadCurrent	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reloadPrevious	boolean		履歴の前のページをルートからの新しいページで置き換える
reloadAll	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reloadDetail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシングを無視する
routeTabId	string		Routable Tab id
routeProps	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
preventRouter	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<Link> action related properties
panelOpen	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panelClose	string boolean		クリックでパネルを閉じる
panelToggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actionsOpen	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actionsClose	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popupOpen	string boolean		クリック時に開くポップアップのCSSセレクタ
popupClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popoverOpen	string boolean		クリックで開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheetOpen	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
loginScreenOpen	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortableEnable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortableToggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbarEnable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbarDisable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbarToggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbarClear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
cardOpen	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
cardClose	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menuClose	boolean		クリックするとメニューのドロップダウンを閉じる

リンクイベント

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

例

ナビゲーションリンク

<Link href="/about/">About</Link>

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

<Link back>Back</Link>

ルーターのパラメータで

<Link href="/about/" animate={false} ignoreCache={true}>About</Link>

外部へのリンク

<Link href="http://google.com" external>Google</Link>

タブリンク

{/* Tabs  */}
<Tabs>
  <Tab id="tab-1" tabActive>Tab 1</Tab>
  <Tab id="tab-2">Tab 2</Tab>
</Tabs>
{/* Switch Between Tabs  */}
<Link tabLink="#tab-1" tabLinkActive>Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>

ルーティング可能なタブ

{/* Tabs  */}
<Tabs>
  <Tab id="tab-1"></Tab>
  <Tab id="tab-2"></Tab>
</Tabs>
{/* Switch Between Tabs  */}
<Link tabLink routeTabId="tab-1" href="/tabs/">Show Tab 1</Link>
<Link tabLink routeTabId="tab-2" href="/tabs/tab-2/">Show Tab 2</Link>

オープン＆クローズパネル

<Link panelOpen="left">Open Left Panel</Link>
<Link panelClose>Close Panel</Link>

ポップアップのオープン＆クローズ

<Link popupOpen="#my-popup">Open Popup</Link>
<Link popupClose="#my-popup">Close Popup</Link>

アイコンとカラー

<Link iconF7="house" text="Home" color="red"></Link>