Link Svelte 组件

Link 是用于创建导航链接、自定义操作、切换选项卡、打开/关闭面板等的 اصلی 组件。

Link 组件

包含以下组件

链接

Link 属性

属性	类型	默认值	描述
<Link> 属性
noLinkClass	布尔值		移除 "link" 类
tabLink	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值		使该选项卡链接处于活动状态
text	字符串		链接文本
badge	字符串数字		徽章计数
badgeColor	字符串		徽章颜色。默认颜色之一
iconOnly	布尔值		在导航栏/工具栏中使用时启用，其中仅包含图标
tooltip	字符串		链接工具提示文本，在链接悬停/按下时显示
tooltipTrigger	字符串	hover	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`
<Link> 与智能选择相关的属性
smartSelect	布尔值	false	启用智能选择行为
smartSelectParams	对象		包含智能选择参数的对象
<Link> 与图标相关的属性
iconSize	字符串数字		图标大小（以像素为单位）
iconColor	字符串		图标颜色。默认颜色之一
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标的名称
iconMaterial	字符串		Material Icons 字体图标的名称
iconIos	字符串		在使用 iOS 主题时使用的图标。由图标族和图标名称组成，以冒号分隔，例如 `f7:house`
iconMd	字符串		在使用 MD 主题时使用的图标。由图标族和图标名称组成，以冒号分隔，例如 `material:home`
iconBadge	字符串数字		在图标中添加徽章（用于标签栏的图标）
<Link> 与导航/路由相关的属性
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值 `href="false"`，则不会添加 `href` 标签
target	字符串		链接 target 属性的值，例如 `_blank`、`_self` 等。
view	字符串		要加载页面的 View 的 CSS 选择器。或 `current` 以在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用后退导航链接
openIn	字符串		允许将页面路由打开为模态或面板。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布尔值		强制加载页面并忽略历史记录中的先前页面（与 `back` 属性一起使用）
reloadCurrent	布尔值		重新加载新页面而不是当前活动页面
reloadPrevious	布尔值		用新路由中的页面替换历史记录中的先前页面
reloadAll	布尔值		加载新页面并从历史记录和 DOM 中移除所有先前页面
reloadDetail	布尔值		重新加载主从视图中的 Detail 页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称自定义页面过渡
ignoreCache	布尔值		忽略缓存
routeTabId	字符串		可路由选项卡 ID
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	字符串布尔值		要点击时启用的可排序列表的 CSS 选择器
sortableDisable	字符串布尔值		要点击时禁用的可排序列表的 CSS 选择器。或布尔值属性以关闭当前打开的可排序列表
sortableToggle	字符串布尔值		要点击时切换的可排序列表的 CSS 选择器。或布尔值属性以切换当前打开/关闭的可排序列表
searchbarEnable	字符串布尔值		要点击时启用的可扩展搜索栏的 CSS 选择器。或布尔值属性以启用第一个找到的搜索栏
searchbarDisable	字符串布尔值		要点击时禁用的可扩展搜索栏的 CSS 选择器。或布尔值属性以禁用第一个找到的搜索栏
searchbarToggle	字符串布尔值		要点击时切换的可扩展搜索栏的 CSS 选择器。或布尔值属性以切换第一个找到的搜索栏
searchbarClear	字符串布尔值		要点击时清除的可扩展搜索栏的 CSS 选择器。或布尔值属性以清除第一个找到的搜索栏
cardOpen	字符串布尔值		要点击时打开的可扩展卡片的 CSS 选择器。或布尔值以打开第一个找到的可扩展卡片
cardClose	字符串布尔值		要点击时关闭的可扩展卡片的 CSS 选择器。或布尔值属性以关闭当前打开的可扩展卡片
cardPreventOpen	布尔值		点击具有此属性的元素不会打开其父可扩展卡片

Link 事件

事件	描述
<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>

改进本文档

在本页

Link 组件
Link 属性
Link 事件
示例