連結 React 元件

連結是建立導覽連結、自訂動作、切換標籤、開啟/關閉面板等的主要元件。

連結元件

包含下列元件

連結

連結屬性

屬性	類型	預設值	說明
<Link> 屬性
noLinkClass	布林值		移除「連結」類別
tabLink	字串布林值		啟用標籤連結並指定目標標籤的 CSS 選擇器（如果指定為字串）
tabLinkActive	布林值		使此標籤連結處於活動狀態
text	字串		連結文字
badge	字串數字		徽章計數
badgeColor	字串		徽章顏色。其中一種預設顏色
iconOnly	布林值		僅在導覽列/工具列中使用時啟用，且僅在其中包含圖示
tooltip	字串		連結工具提示文字，在連結滑鼠游標移入/按下時顯示
tooltipTrigger	字串	hover	定義如何觸發（開啟）工具提示。可以是 `hover`、`click` 或 `manual`
<Link> 與 Smart Select 相關的屬性
smartSelect	布林值	false	啟用 Smart Select 行為
smartSelectParams	物件		包含 Smart Select 參數的物件
<Link> 與圖示相關的屬性
iconSize	字串數字		圖示大小（像素）
iconColor	字串		圖示顏色。其中一種預設顏色
icon	字串		自訂圖示類別
iconF7	字串		F7 圖示字型圖示名稱
iconMaterial	字串		Material 圖示字型圖示名稱
iconIos	字串		如果使用 iOS 主題，則會使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 `f7:house`
iconMd	字串		如果使用 MD 主題，則會使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 `material:home`
iconBadge	字串數字		將徽章新增至圖示（用於標籤列的圖示）
<Link> 導覽/路由相關屬性
href	字串布林值	#	要載入的頁面 URL。如果布林值 `href="false"`，則不會新增 `href` 標籤
target	字串		連結目標屬性的值，例如 `_blank`、`_self` 等。
view	字串		要載入頁面的檢視 CSS 選擇器。或 `current` 以在目前檢視中載入。
外部	布林值		啟用以繞過 Framework7 的連結點擊處理常式
返回	布林值		啟用返回導覽連結
openIn	字串		允許開啟頁面路由為模態或面板。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布林值		強制載入頁面並忽略歷史記錄中的前一頁（與 `back` 屬性一起使用）
reloadCurrent	布林值		重新載入新頁面，而不是當前活動的頁面
reloadPrevious	布林值		使用路由中的新頁面取代歷史記錄中的前一頁
reloadAll	布林值		載入新頁面，並從歷史記錄和 DOM 中移除所有前一頁
reloadDetail	布林值		在主從檢視中重新載入詳細資料頁面
animate	布林值		停用頁面動畫
transition	字串		自訂頁面轉場的名稱
ignoreCache	布林值		忽略快取
routeTabId	字串		可路由標籤識別碼
routeProps	物件		包含其他屬性的物件，這些屬性將傳遞至目標路由元件
preventRouter	布林值	false	如果設定，則 Framework7 路由器不會處理它
<Link> 動作相關屬性
panelOpen	字串布林值		點擊時開啟的面板的 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
panelClose	字串布林值		點擊時關閉面板
panelToggle	字串布林值		點擊時切換的面板的 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
actionsOpen	字串布林值		點擊時開啟的動作表單的 CSS 選擇器
actionsClose	字串布林值		點擊時關閉的動作表單的 CSS 選擇器。或布林屬性，用於關閉目前開啟的動作表單
popupOpen	字串布林值		點擊時開啟的快顯視窗的 CSS 選擇器
popupClose	字串布林值		點擊時關閉的快顯視窗的 CSS 選擇器。或布林屬性，用於關閉目前開啟的快顯視窗
popoverOpen	字串布林值		點擊時開啟的浮動視窗的 CSS 選擇器
popoverClose	字串布林值		點擊時關閉的浮動視窗的 CSS 選擇器。或布林屬性，用於關閉目前開啟的浮動視窗
sheetOpen	字串布林值		點擊時開啟的表單模態的 CSS 選擇器
sheetClose	字串布林值		點擊時關閉的表單模態的 CSS 選擇器。或布林屬性，用於關閉目前開啟的表單模態
loginScreenOpen	字串布林值		點擊時開啟的登入畫面的 CSS 選擇器
loginScreenClose	字串布林值		點擊時關閉的登入畫面的 CSS 選擇器。或布林屬性，用於關閉目前開啟的登入畫面
sortableEnable	字串布林值		點選時要啟用的 Sortable 清單的 CSS 選擇器
sortableDisable	字串布林值		點選時要停用的 Sortable 清單的 CSS 選擇器。或布林屬性，用於關閉目前開啟的 Sortable 清單
sortableToggle	字串布林值		點選時要切換的 Sortable 清單的 CSS 選擇器。或布林屬性，用於切換目前開啟/關閉的 Sortable 清單
searchbarEnable	字串布林值		點選時要啟用的可展開搜尋列的 CSS 選擇器。或布林屬性，用於啟用第一個找到的搜尋列
searchbarDisable	字串布林值		點選時要停用的可展開搜尋列的 CSS 選擇器。或布林屬性，用於停用第一個找到的搜尋列
searchbarToggle	字串布林值		點選時要切換的可展開搜尋列的 CSS 選擇器。或布林屬性，用於切換第一個找到的搜尋列
searchbarClear	字串布林值		點選時要清除的可展開搜尋列的 CSS 選擇器。或布林屬性，用於清除第一個找到的搜尋列
cardOpen	字串布林值		點選時要開啟的可展開卡片的 CSS 選擇器。或布林屬性，用於開啟第一個找到的可展開卡片
cardClose	字串布林值		點選時要關閉的可展開卡片的 CSS 選擇器。或布林屬性，用於關閉目前開啟的可展開卡片
cardPreventOpen	布林值		點選具有此屬性的元素不會開啟其父層可展開卡片

連結事件

事件	說明
<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>

改善此文件

在此頁面上

連結元件
連結屬性
連結事件
範例