連結 Svelte 組件

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

連結組件

包含以下元件

連結

連結屬性

屬性	類型	預設值	說明
<Link> 屬性
noLinkClass	布林值		移除 "link" 類別
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	字串數字		圖示大小，單位為 px
iconColor	字串		圖示顏色。其中一種預設顏色
icon	字串		自訂圖示類別
iconF7	字串		F7 Icons 字型圖示名稱
iconMaterial	字串		Material Icons 字型圖示名稱
iconIos	字串		如果使用 iOS 主題時要使用的圖示。包含圖示系列和圖示名稱，中間以冒號分隔，例如 `f7:house`
iconMd	字串		如果使用 MD 主題時要使用的圖示。包含圖示系列和圖示名稱，中間以冒號分隔，例如 `material:home`
iconBadge	字串數字		在圖示中加入徽章 (用於標籤列的圖示)
<Link> 導覽/路由相關屬性
href	字串布林值	#	要載入的頁面 URL。如果布林值為 `href="false"`，則不會加入 `href` 標籤
target	字串		連結目標屬性的值，例如 `_blank`、`_self` 等
view	字串		要載入頁面的檢視 CSS 選擇器。或 `current` 在目前檢視中載入
external	布林值		啟用以繞過 Framework7 的連結點擊處理常式
back	布林值		啟用返回導覽連結
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>

改善此文件

在此頁面

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