Link Svelte Component

Link is main component to create links for navigation, custom actions, switching tabs, open/close modals, etc.

Link Components

There are following components included:

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
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	Enable if Link doesn't contain anything except icon
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
navbar	boolean	false	Should be enabled if Link is in the Navbar
tabbar	boolean	false	Should be enabled if Link is in the Tabbar
tabbarActive	boolean	false	Highlights Tabbar Link as currently active
toolbar	boolean	false	Should be enabled if Link is in the Toolbar
touchRipple	boolean	undefined	Enables touch ripple effect in Material theme. If not specified, enabled by default if link is `toolbar`, `tabbar` or `navbar`
onClick	function(e)		Click handler
onClick	function(e)		`click` event handler

<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>