Link Vue Component

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

There are following components included:

  • Link
NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.tabbarInactivestring'text-black dark:text-white dark:text-opacity-55'

Inactive tabbar link text color

colors.textstring'text-primary'

Link text color

componentstring'a'

Component's HTML Element

iconOnlybooleanfalse

Enable if Link doesn't contain anything except icon

navbarbooleanfalse

Should be enabled if Link is in the Navbar

tabbarbooleanfalse

Should be enabled if Link is in the Tabbar

tabbarActivebooleanfalse

Highlights Tabbar Link as currently active

toolbarbooleanfalse

Should be enabled if Link is in the Toolbar

touchRipplebooleantrue

Enables touch ripple effect in Material theme

NameTypeDescription
clickfunction(e)

Click handler

Examples

<twm-link href="/about">About</twm-link>
<twm-link href="https://google.com" target="_blank"> Google </twm-link>
<twm-link :link-props="{to: '/about'}" component="router-link">
  About
</twm-link>
<twm-navbar title="My App">
  <template #right>
    <twm-link navbar @click="openMenu">Menu</twm-link>
  </template>
</twm-navbar>
<twm-toolbar>
  <twm-link toolbar @click="action1">Action 1</twm-link>
  <twm-link toolbar @click="action2">Action 2</twm-link>
</twm-toolbar>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.