@psff/cmp-tab-menu

@psff/cmp-tab-menu

Component to render a tab menu and tab items to allow the user to navigate through content sections.

Getting started

• Setup the package as a dependency.

  yarn add @psff/cmp-tab-menu
  

• Use the component as normal tabs.

  import { PsffTabMenu, PsffTabItem } from '@psff/cmp-tab-menu'
  
  @Component({
    components: {
      PsffTabItem,
      PsffTabMenu,
    },
  })
  export default class MyComponent extends Vue {
    private menuItems = [
      { id: 1, label: 'Tab item 1' },
      { id: 2, label: 'Tab item 2', active: true },
      { id: 3, label: 'Tab item 3' },
      { id: 4, label: 'Tab item 4' },
    ];
  
    public handleItemClick(itemId: number) {
      this.menuItems = this.menuItems.map((item) => ({
        ...item,
        active: itemId === item.id,
      }));
    }
  }
  

  <psff-tab-menu>
    <psff-tab-item
      v-for="item in menuItems"
      :key="item.id"
      :active="item.active"
      @click="handleItemClick(item.id)">
      {{ item.label }}
    </psff-tab-item>
  </psff-tab-menu>
  

• Use for VueRouter navigation with tab item as router link wrapper.

  // router.ts
  
  // ...imports and more stuff...
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home,
      },
      {
        path: '/about',
        name: 'about',
        component: About,
      },
    ],
  });
  

  // MainNavigation
  
  import { PsffTabMenu, PsffTabItem } from '@psff/cmp-tab-menu'
  
  @Component({
    components: {
      PsffTabItem,
      PsffTabMenu,
    },
  })
  export default class MainNavigation extends Vue {}
  

  <psff-tab-menu>
    <psff-tab-item :to="{ name: 'home' }">Home</psff-tab-item>
    <psff-tab-item :to="{ name: 'about' }">About</psff-tab-item>
  </psff-tab-menu>
  

Specifications

Props

• <psff-tab-item>

  • active (boolean, default: false): If the item should render as active or not.

CSS Custom properties

Generic (on iddle state)

• <psff-tab-menu>

  • --psff-tab-menu-background (default #fff)
  • --psff-tab-menu-font-family (default inherit)
  • --psff-tab-menu-font-size (default inherit)
  • --psff-tab-menu-font-weight (default inherit)
  • --psff-tab-menu-spacing (default 0)

• <psff-tab-item>

  • --psff-tab-menu-item-background (default transparent)
  • --psff-tab-menu-item-border-color (default transparent)
  • --psff-tab-menu-item-border-radius (default .5rem .5rem 0 0)
  • --psff-tab-menu-item-border-size (default 0)
  • --psff-tab-menu-item-color (default #adadad)
  • --psff-tab-menu-item-floating-border-bottom (default 0)`
  • --psff-tab-menu-item-floating-border-color (default transparent)
  • --psff-tab-menu-item-floating-border-radius (default .125rem)
  • --psff-tab-menu-item-floating-border-size (default 0)
  • --psff-tab-menu-item-min-width (default 6.75rem)
  • --psff-tab-menu-item-padding (default 1rem .5rem)
  • --psff-tab-menu-item-text-transform (default none)

Hover

• <psff-tab-item>

  • --psff-tab-menu-item-background-hover (default #f5f7ff)
  • --psff-tab-menu-item-border-color-hover (default #3066f9)
  • --psff-tab-menu-item-border-size-hover (default var(--psff-tab-menu-item-border-size))
  • --psff-tab-menu-item-color-hover (default #3066f9)
  • --psff-tab-menu-item-floating-border-color-hover (default #3066f9)
  • --psff-tab-menu-item-floating-border-size-hover (default var(--psff-tab-menu-item-floating-border-size))

Active (when item active property is true)

• <psff-tab-item>

  • --psff-tab-menu-item-background-active (default #f5f7ff)
  • --psff-tab-menu-item-border-color-active (default #648cfa)
  • --psff-tab-menu-item-border-size-active (default var(--psff-tab-menu-item-border-size-hover))
  • --psff-tab-menu-item-color-active (default #648cfa)
  • --psff-tab-menu-item-floating-border-color-active (default #648cfa)
  • --psff-tab-menu-item-floating-border-size-active (default var(--psff-tab-menu-item-floating-border-size-hover))