ButtonGroup.md

Fish Tank Buttons

 

Table Of Contents

• Usage

  • How to Import ButtonGroup and Button Group Button Components
  • How to Export Your Custom Button Components

• Button Components

  • Button Group Component
  • Button Group Button

• Props

  • Examples of Implementation
  • List of Available Props

Usage

 

To import button components

import { 
  FishTankButtonGroupButton,
  FishTankButtonGroup,
  }  from '@fishtank/fishtank-vue'

 

To export your custom Vue components

In your Vue component class

1. Under components, list the button grop and button components
2. Under data, you will return your model values to bind to each button component

 

e.g.

  export default Vue.extend({

    components:{
      //imported button and button group components
      FishTankButtonGroupButton,
      FishTankButtonGroup,
    },

    data: function(){
      return{
        //prop values that are sent to components
        valueForButtonVModel="default Value"
      }
    },

  })

 

Components

 

See Usage for steps on how to enable button group and button components for usage in your template. The following sub-sections describe each button group and button component and their props. There are also actions that can be added to each button component .

See the Table of Contents to jump directly to the section you need.

 

Button Group

 

 

    <FishTankButtonGroup>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel"
        value="All"
        label="All"/>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel"
        value="Members"
        label="Members"/>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel" 
        value="Staff"
        label="Staff"/>
    </FishTankButtonGroup>

Small Button Group

 

 

    <FishTankButtonGroup small>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel"
        value="All"
        label="All"/>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel"
        value="Members"
        label="Members"/>
      <FishTankButtonGroupButton
        v-model="valueForButtonVModel" 
        value="Staff"
        label="Staff"/>
    </FishTankButtonGroup>

See Usage section for an explanation on how to enable this button component in your template.

 

Adding actions:

Actions applicable to all button components.

<FishTankButtonGroup small>
  <FishTankBGButton
    v-model="bgValue"
    value="All"
    label="All"
    @click="handleClick"/>
</FishTankButtonGroup>

See Usage section for an explanation on how to enable button components in your template.

Universal Props

Button Group Props

 

Examples of Implementation

<FishTankButtonGroup small>
  <!-- Button Group Buttons Go here -->
</FishTankButtonGroup>

 

List of Available Props

Name	Type	Description	Required	Default
small	Boolean	Show small button group	false	false

See Usage section for an explanation on how to enable button components in your template.

 

Button Group Button Props

 

Examples of Implementation

<FishTankButtonGroupButton
  v-model="bgValue"
  value="All"
  label="All"
  :disabled="falsyVariable"/>

 

List of Available Props

Name	Type	Description	Required	Default
value	Boolean, Array, String, Number, Object	Value Prop to be leveraged or emitted by button on click	false	false
disabled	Boolean	Specify if button should be disabled	false	false
label	String	Button label	true	false

See Usage section for an explanation on how to enable button components in your template.