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

リンク React コンポーネント

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

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

プロパティタイプデフォルト説明
<Link> プロパティ
noLinkClassboolean"link" クラスを削除します
tabLinkstring
boolean		タブリンクを有効にし、ターゲットタブのCSSセレクターを指定します（文字列として指定されている場合）
tabLinkActivebooleanこのタブリンクをアクティブにします
textstringリンクテキスト
badgestring
number		バッジカウント
badgeColorstringバッジの色。デフォルトカラーのいずれか
iconOnlybooleanナビゲーションバー/ツールバー内でアイコンのみを使用する場合に有効にします
tooltipstringリンクホバー/プレス時に表示されるリンクツールチップテキスト
tooltipTriggerstringhoverツールチップのトリガー（開く）方法を定義します。hover、click、またはmanualを指定できます
<Link> スマートセレクト関連プロパティ
smartSelectbooleanfalseスマートセレクトの動作を有効にします
smartSelectParamsobjectスマートセレクトパラメータを含むオブジェクト
<Link> アイコン関連プロパティ
iconSizestring
number		アイコンサイズ（px）
iconColorstringアイコンの色。デフォルトカラーのいずれか
iconstringカスタムアイコンクラス
iconF7stringF7アイコンフォントアイコンの名前
iconMaterialstringマテリアルアイコンフォントアイコンの名前
iconIosstringiOSテーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます。例：f7:house
iconMdstringMDテーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます。例：material:home
iconBadgestring
number		アイコンにバッジを追加します（タブバーのアイコンで使用することを目的としています）
<Link> ナビゲーション/ルーター関連プロパティ
hrefstring
boolean		#ロードするページのURL。ブール値href="false"の場合、hrefタグは追加されません
targetstringリンクターゲット属性の値。例：_blank、_selfなど
viewstringページをロードするビューのCSSセレクター。または、現在のビューにロードする場合はcurrentを指定します。
externalbooleanFramework7のリンククリックハンドラをバイパスできるようにします
backboolean戻るナビゲーションリンクを有効にします
openInstringページルートをモーダルまたはパネルとして開くことができます。popup、loginScreen、sheet、popover、またはpanelを指定できます
forcebooleanページを強制的にロードし、履歴の前のページを無視します（backプロパティと一緒に使用します）
reloadCurrentboolean現在アクティブなページの代わりに新しいページをリロードします
reloadPreviousboolean履歴の前のページをルートからの新しいページに置き換えます
reloadAllboolean新しいページをロードし、履歴とDOMから以前のすべてのページを削除します
reloadDetailbooleanマスター詳細ビューの詳細ページをリロードします
animatebooleanページアニメーションを無効にします
transitionstringカスタムページトランジションの名前
ignoreCachebooleanキャッシュを無視します
routeTabIdstringルーティング可能なタブID
routePropsobjectターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
preventRouterbooleanfalse設定されている場合、Framework7ルーターによって処理されません
<Link> アクション関連プロパティ
panelOpenstring
boolean		クリック時に開くパネルのCSSセレクター。DOMに左パネルまたは右パネルのみが存在する場合は、leftまたはrightを指定できます。
panelClosestring
boolean		クリック時にパネルを閉じます
panelTogglestring
boolean		クリック時に切り替えるパネルのCSSセレクター。DOMに左パネルまたは右パネルのみが存在する場合は、leftまたはrightを指定できます。
actionsOpenstring
boolean		クリック時に開くアクションシートのCSSセレクター
actionsClosestring
boolean		クリック時に閉じるアクションシートのCSSセレクター。または、現在開いているアクションシートを閉じるブール値プロパティ
popupOpenstring
boolean		クリック時に開くポップアップのCSSセレクター
popupClosestring
boolean		クリック時に閉じるポップアップのCSSセレクター。または、現在開いているポップアップを閉じるブール値プロパティ
popoverOpenstring
boolean		クリック時に開くポップオーバーのCSSセレクター
popoverClosestring
boolean		クリック時に閉じるポップオーバーのCSSセレクター。または、現在開いているポップオーバーを閉じるブール値プロパティ
sheetOpenstring
boolean		クリック時に開くシートモーダルのCSSセレクター
sheetClosestring
boolean		クリック時に閉じるシートモーダルのCSSセレクター。または、現在開いているシートモーダルを閉じるブール値プロパティ
loginScreenOpenstring
boolean		クリック時に開くログイン画面のCSSセレクター
loginScreenClosestring
boolean		クリック時に閉じるログイン画面のCSSセレクター。または、現在開いているログイン画面を閉じるブール値プロパティ
sortableEnablestring
boolean		クリック時に有効にするソート可能リストのCSSセレクター
sortableDisablestring
boolean		クリック時に無効にするソート可能リストのCSSセレクター。または、現在開いているソート可能リストを閉じるブール値プロパティ
sortableTogglestring
boolean		クリック時に切り替えるソート可能リストのCSSセレクター。または、現在開いている/閉じているソート可能リストを切り替えるブール値プロパティ
searchbarEnablestring
boolean		クリック時に有効にする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを有効にするブール値プロパティ
searchbarDisablestring
boolean		クリック時に無効にする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを無効にするブール値プロパティ
searchbarTogglestring
boolean		クリック時に切り替える展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを切り替えるブール値プロパティ
searchbarClearstring
boolean		クリック時にクリアする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーをクリアするブール値プロパティ
cardOpenstring
boolean		クリック時に開く展開可能なカードのCSSセレクター。または、最初に見つかった展開可能なカードを開くブール値
cardClosestring
boolean		クリック時に閉じる展開可能なカードのCSSセレクター。または、現在開いている展開可能なカードを閉じるブール値プロパティ
cardPreventOpenbooleanこのプロパティを持つ要素をクリックしても、その親の展開可能なカードは開きません
イベント説明
<Link> イベント
clickリンクをクリックした後にイベントがトリガーされます

例

ナビゲーションリンク

<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>
このドキュメントの改善
このページの内容