@psff/cmp-togglebutton

@psff/cmp-togglebutton psff-togglebutton

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

Getting started

• Setup the package as a dependencie.

  yarn add @psff/cmp-togglebutton
  

• 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)