🔥 新プロジェクトのご紹介 t0ggles -究極のプロジェクト管理ツール！ 🔥

Link React コンポーネント

Link は、ナビゲーション、カスタムアクション、タブの切り替え、モーダルの開閉など、リンクを作成するための主要なコンポーネントです。

Link コンポーネント

以下のコンポーネントが含まれています。

  • リンク

Link プロパティ

名前型デフォルト値説明
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

アイコンのみを含む Link の場合に有効化します。

linkProps任意

Link/Button に渡す追加のプロパティ（属性）を含むオブジェクト

navbarブール値false

Link がナビゲーションバー内にある場合に有効にする必要があります。

tabbarブール値false

Link がタブバー内にある場合に有効にする必要があります。

tabbarActiveブール値false

タブバーの Link を現在アクティブとして強調表示します。

toolbarブール値false

Link がツールバー内にある場合に有効にする必要があります。

touchRippleブール値未定義

マテリアルテーマでタッチリップル効果を有効にします。指定されていない場合、link が `toolbar`、`tabbar`、または `navbar` の場合、デフォルトで有効になります。

onClickfunction(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.