@psff/cmp-tab-menu v1.0.5

@psff/cmp-tab-menu

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

Getting started

1. Setup the package as a dependency.

   yarn add @psff/cmp-tab-menu

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

3. 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))