@psff/cmp-togglebutton v1.0.3

@psff/cmp-togglebutton psff-togglebutton

Togglebutton are compact group of buttons that allow users to select one option or filter content.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-togglebutton

2. Use the component <psff-togglebutton />.

   import PsffTogglebutton, { PsffTogglebuttonItem } from '@psff/cmp-togglebutton';
   
   @Component({
     components: {
       'psff-togglebutton': PsffTogglebutton,
     },
   })
   export default class MyComponent extends Vue {
     selectorItems: PsffTogglebuttonItem[] = [
       { label: 'One', value: 1 },
       { label: 'Two', value: 2 },
       { label: 'Three', value: 3 },
     ];
     selectedItem = 2;
   }

   .my-togglebutton {
     --psff-togglebutton-label-color: black;
   }

   <psff-togglebutton
     class="my-togglebutton"
     :items="togglebuttonItems"
     v-model="selectedItem"
   />

Specifications

Models

• PsffTogglebuttonItem: Interface for items definition.

  interface PsffTogglebuttonItem {
    label: string;
    value: any;
  }

Parameters

• items (PsffTogglebuttonItem[], required): to show a label for the radio input.
• value (any): the value of the item that should be active.

Events

• change (value: any): value of the item clicked by user.

Custom propperties

• Generic:

  • --psff-togglebutton-background-color (default #fff)
  • --psff-togglebutton-border-color (default #f7f7f7)
  • --psff-togglebutton-border-size (default .125rem)
  • --psff-togglebutton-border-radius (default .25rem)
  • --psff-togglebutton-font-family (default inherit)
  • --psff-togglebutton-font-size (default inherit)
  • --psff-togglebutton-font-variantt (default normal)
  • --psff-togglebutton-font-weight (default inherit)
  • --psff-togglebutton-label-color (default #5a5a5a)
  • --psff-togglebutton-line-height (default inherit)
  • --psff-togglebutton-item-min-width (default 0)
  • --psff-togglebutton-item-padding (default .3125rem 1.5rem)

• Focused:

  • --psff-togglebutton-background-color-focused (default #fff)
  • --psff-togglebutton-border-color-focused (default #f7f7f7)
  • --psff-togglebutton-label-color-focused (default #000)

• Hovered:

  • --psff-togglebutton-background-color-hovered (default #fff)
  • --psff-togglebutton-border-color-hovered (default #f7f7f7)
  • --psff-togglebutton-label-color-hovered (default #000)

• Checked:

  • --psff-togglebutton-background-color-checked (default #648cfa)
  • --psff-togglebutton-border-color-checked (default transparent)
  • --psff-togglebutton-label-color-checked (default #fff)