链接 React 组件

链接是创建导航链接、自定义操作、切换选项卡、打开/关闭面板等的主要组件。

链接组件

包含以下组件：

Link

链接属性

属性	类型	默认	描述
<Link> 属性
noLinkClass	布尔值		移除 "link" 类
tabLink	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值		使此选项卡链接处于活动状态
text	字符串		链接文本
badge	字符串数字		徽章计数
badgeColor	字符串		徽章颜色。可以是默认颜色之一
iconOnly	布尔值		在导航栏/工具栏中仅使用图标时启用
提示	字符串		链接提示链接悬停/点击时显示的文本
提示触发器	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
<Link> 智能选择相关属性
smartSelect	布尔值	false	启用智能选择行为
smartSelectParams	对象		带有智能选择参数
<Link> 图标相关属性
iconSize	字符串数字		图标大小（像素）
iconColor	字符串		图标颜色。可以是默认颜色之一
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标的名称
iconMaterial	字符串		Material 图标字体图标的名称
iconIos	字符串		在使用 iOS 主题时使用的图标。由图标系列和图标名称组成，例如`f7:house`
iconMd	字符串		在使用 MD 主题时使用的图标。由图标系列和图标名称组成，例如`material:home`
iconBadge	字符串数字		为图标添加徽章（用于选项卡图标）
<Link> 导航/路由相关属性
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值`href="false"`则不会添加`href`tag
target	字符串		链接目标属性值，例如`_blank`, `_self`，等等。
view	字符串		要加载页面的视图的 CSS 选择器。或者`current`在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用返回导航链接
openIn	字符串		允许将页面路由作为模态或面板打开。可以是`popup`, `loginScreen`, `sheet`, `popover`或`panel`
force	布尔值		强制页面加载并忽略历史记录中的先前页面（与`back`属性一起使用）
reloadCurrent	布尔值		重新加载新页面而不是当前活动的页面
reloadPrevious	布尔值		用路由中的新页面替换历史记录中的先前页面
reloadAll	布尔值		加载新页面并从历史记录和 DOM 中删除所有先前页面
reloadDetail	布尔值		在主/详细信息视图中重新加载详细信息页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称custom page transition
ignoreCache	布尔值		忽略缓存
routeTabId	字符串		可路由选项卡 ID
routeProps	对象		将传递给目标路由组件的附加属性对象
preventRouter	布尔值	false	如果设置，则不会被 Framework7 路由器处理
<Link> 操作相关属性
panelOpen	字符串布尔值		点击时打开的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
panelClose	字符串布尔值		点击时关闭面板
panelToggle	字符串布尔值		点击时切换的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
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> 事件
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>

改进此文档

在本页上

链接组件
链接属性
链接事件
示例