Link Svelteコンポーネント

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

リンクコンポーネント

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

名前	型	デフォルト	説明
colors	object		Tailwind CSSカラークラスを持つオブジェクト
colors.navbarTextIos	string	'text-primary'
colors.navbarTextMaterial	string	''
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
iconOnly	boolean	false	アイコンのみを含むリンクの場合に有効にします。
linkProps	any		Link/Buttonに渡す追加のプロパティ（属性）を持つオブジェクト
navbar	boolean	false	リンクがナビゲーションバー内にある場合に有効にする必要があります。
tabbar	boolean	false	リンクがタブバー内にある場合に有効にする必要があります。
tabbarActive	boolean	false	現在アクティブなタブバーリンクをハイライト表示します。
toolbar	boolean	false	リンクがツールバー内にある場合に有効にする必要があります。
touchRipple	boolean	undefined	マテリアルテーマでタッチリップル効果を有効にします。指定されていない場合、リンクが`toolbar`、`tabbar`、または`navbar`の場合、デフォルトで有効になります。
onClick	function(e)		クリックハンドラー
onClick	function(e)		`click`イベントハンドラー

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

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

<Link linkProps={{to: '/about'}} component={RouterLink}>
  About
</Link>

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

<Toolbar>
  <Link toolbar onClick={action1}>Action 1</Link>
  <Link toolbar onClick={action2}>Action 2</Link>
</Toolbar>