🔥 认识我们新的项目 t0ggles - 你终极的项目管理工具！ 🔥

链接 React 组件

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

链接组件

包含以下组件

  • 链接

链接属性

名称类型默认值描述
颜色对象

带有 Tailwind CSS 颜色类的对象

colors.navbarTextIos字符串'text-primary'
colors.navbarTextMaterial字符串''
colors.textIos字符串'text-primary'
colors.textMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
组件字符串'a'

组件的 HTML 元素

iconOnly布尔值假

如果链接除了图标之外不包含任何内容，则启用

linkProps任何

包含要传递给链接/按钮的额外属性（属性）的对象

导航栏布尔值假

如果链接在导航栏中，则应启用

标签栏布尔值假

如果链接在标签栏中，则应启用

tabbarActive布尔值假

将标签栏链接突出显示为当前活动

工具栏布尔值假

如果链接在工具栏中，则应启用

触摸波纹布尔值未定义

在 Material 主题中启用触摸波纹效果。如果未指定，则默认情况下，如果链接是toolbar、tabbar 或navbar，则启用

onClick函数(e)

点击处理程序

示例

导航链接

<Link href="/about">About</Link>

外部链接

<Link href="https://google.com" target="_blank">
  Google
</Link>

React 路由器链接

import { Link } from 'konsta/react';
import { Link as RouterLink } from 'react-router-dom';

// ...

<Link href="/about" component={RouterLink}>
  About
</Link>

导航栏中的链接

<Navbar
  title="My App"
  right={
    <Link navbar onClick={openMenu}>Menu</Link>
  }
/>

工具栏中的链接

<Toolbar>
  <Link toolbar onClick={action1}>Action 1</Link>
  <Link toolbar onClick={action2}>Action 2</Link>
</Toolbar>
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.