# Introduction

The hhl-tabs component gives you navigation with tabs. Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

# Standard

The hhl-tabs component har 3 properties.

• type="": Inline is standard use router when you use it with router.
  
• default-route="": The route of the hhl-tab that should be active when page load.
  
• root="": The root path of the page where this component is placed. Only used in combination with router.

The hhl-tab component har 3 properties.

• label="": The text on the tab.
  
• route="": The name/route of the tab.
• use-show: By default the content of the tab will be destroyed or mounthed when navigating, when using use-show it will not.

Here the tabs contents are inline in the component and the default-route = page2.

# With page components

Here the tab contents is component

# With router

It is not possible to make a active example with router but the syntax is like this.
Here there are 2 page components tab-page1 and tab-page-2 and the main page path is "/tabs"

    <hhl-tabs root="/tabs" default-route="/tabs/page2" type="router">
      <hhl-tab name="Page 1" route="/tabs/page1"/>
      <hhl-tab name="Page 2" route="/tabs/page2"/>
    </hhl-tabs>

The router is setup like this.

Vue.use(Router);

export default new Router({
  routes: [
    { path: "*", redirect: "/home" },
    {
      path: "/home",
      name: "home",
      component: Home
    },
    {
      path: "/tabs",
      name: "tabs",
      component: () => import("./views/tabs.vue"),
      children: [
        {
          path: "page1",
          component: () => import("./views/page1.vue")
        },
        {
          path: "page2",
          component: () => import("./views/page2.vue")
        }
      ]
    }
  ]
});

# Disabled

You can add disabled to a tab

# WillChange event

You can use a will-change event to do some work or validation before leaving the active tab

# CSS Variables