🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

連結 React 元件

連結是主要元件，用於建立導覽連結、自訂動作、切換標籤、開啟/關閉模態視窗等。

連結元件

包含以下元件

  • 連結

連結屬性

名稱類型預設值描述
colors物件

帶有 Tailwind CSS 色彩類別的物件

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

元件的 HTML 元素

iconOnly布林值false

如果連結除了圖示外不包含任何內容，則啟用

linkProps任何

要傳遞給連結/按鈕的其他屬性 (attribute) 的物件

navbar布林值false

如果連結在導覽列中，則應啟用

tabbar布林值false

如果連結在標籤列中，則應啟用

tabbarActive布林值false

將標籤列連結標示為目前活動的連結

toolbar布林值false

如果連結在工具列中，則應啟用

touchRipple布林值未定義

在 Material 主題中啟用觸控波紋效果。如果未指定，如果連結為 toolbar、tabbar 或 navbar，則預設為啟用

onClick函式(e)

點擊處理器

範例

導覽連結

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

外部連結

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

React Router 連結

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 by nolimits4web.