链接 React 组件

链接是用于创建导航链接、自定义操作、切换标签页、打开/关闭面板等的组件。

链接组件

包括以下组件

链接

链接属性

属性	类型	默认	描述
<Link> 属性
noLinkClass	布尔		删除 "link" 类
tabLink	字符串布尔		启用标签页链接并指定目标标签页的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔		使标签页链接处于活动状态
text	字符串		链接文本
徽章	字符串数字		徽章计数
badgeColor	字符串		徽章颜色。其中之一默认颜色
iconOnly	布尔		仅在工具栏/导航栏中使用图标启用
tooltip	字符串		链接工具提示在链接悬停/按下时显示文本
tooltipTrigger	字符串	hover	定义如何触发（打开）工具提示。可以是`hover`、`click`或`manual`
<Link> Smart Select 相关的属性
smartSelect	布尔	false	启用 Smart Select 行为
smartSelectParams	object		对象Smart Select 参数
<Link> 图标相关属性
iconSize	字符串数字		图标大小（像素）
iconColor	字符串		图标颜色。其中之一默认颜色
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标名称
iconMaterial	字符串		材质图标字体图标名称
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	字符串		可路由的选项卡 ID
routeProps	object		对象，包含将传递到目标路由组件的其他属性
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>

编辑此文档

在此页面

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