Pitcher Dynamic Button Group

Button definition

button: {
  // Text to show in button
  text: [String, Number]
  // Value to determine whats selected
  value: any
  // To highlight if this button was selected last time
  isSelectedBefore: Boolean
  // v-btn props
  buttonProps: {
    ...all v-btn props can be applied here
  }
  // font awesome icon e.g. fa-users
  icon: String
  // v-icon props
  iconProps: {
    ...all v-icon props can be applied here
  }
}

Simple Usage

Simple usage example of PDynamicButtonGroup.

Show Code

<template>
  <div>
    <PDynamicButtonGroup v-model="buttonGroupState" :buttons="buttons" />
    <div class="mt-8">
      <code>buttonGroupState:</code>
      <span class="secondary--text">
        {{ buttonGroupState }}
      </span>
    </div>
  </div>
</template>

<script>
import { PDynamicButtonGroup } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDynamicButtonGroup,
  },
  setup() {
    const state = reactive({
      buttonGroupState: '',
      buttons: [
        {
          text: 'Yes',
          value: true,
          buttonProps: {
            color: 'success',
          },
          icon: 'fa-check',
        },
        {
          text: '',
          value: 'maybe',
          buttonProps: {
            color: 'warning',
          },
          icon: 'fa-question',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
        {
          text: 'No',
          value: false,
          buttonProps: {
            color: 'red',
            // size: ''
          },
          icon: 'fa-times',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
      ],
    })

    return { ...toRefs(state) }
  },
})
</script>

Grow

Using with grow property, the button group width is grown to it's container width.

Show Code

<template>
  <PDynamicButtonGroup v-model="buttonGroupState" :buttons="buttons" grow />
</template>

<script>
import { PDynamicButtonGroup } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDynamicButtonGroup,
  },
  setup() {
    const state = reactive({
      buttonGroupState: '',
      buttons: [
        {
          text: 'Yes',
          value: true,
          buttonProps: {
            color: 'success',
          },
          icon: 'fa-check',
        },
        {
          text: '',
          value: 'maybe',
          buttonProps: {
            color: 'warning',
          },
          icon: 'fa-question',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
        {
          text: 'No',
          value: false,
          buttonProps: {
            color: 'red',
            // size: ''
          },
          icon: 'fa-times',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
      ],
    })

    return { ...toRefs(state) }
  },
})
</script>

Multiple selections

Using multiple prop allows user to select multiple buttons. NOTE: When you set multiple: true, mandatory prop is set to false automatically.

Show Code

<template>
  <div>
    <PDynamicButtonGroup v-model="buttonGroupState" :buttons="buttons" multiple />
    <div class="mt-8">
      <code>buttonGroupState:</code>
      <span class="secondary--text">
        {{ buttonGroupState }}
      </span>
    </div>
  </div>
</template>

<script>
import { PDynamicButtonGroup } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDynamicButtonGroup,
  },
  setup() {
    const state = reactive({
      buttonGroupState: [],
      buttons: [
        {
          text: 'Yes',
          value: true,
          buttonProps: {
            color: 'success',
          },
          icon: 'fa-check',
        },
        {
          text: '',
          value: 'maybe',
          buttonProps: {
            color: 'warning',
          },
          icon: 'fa-question',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
        {
          text: 'No',
          value: false,
          buttonProps: {
            color: 'red',
            // size: ''
          },
          icon: 'fa-times',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
      ],
    })

    return { ...toRefs(state) }
  },
})
</script>

Mandatory selection

Using mandatory: false prop allows user to de-select a button.

Show Code

<template>
  <div>
    <PDynamicButtonGroup v-model="buttonGroupState" :buttons="buttons" :mandatory="false" />
    <div class="mt-8">
      <code>buttonGroupState:</code>
      <span class="secondary--text">
        {{ buttonGroupState }}
      </span>
    </div>
  </div>
</template>

<script>
import { PDynamicButtonGroup } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDynamicButtonGroup,
  },
  setup() {
    const state = reactive({
      buttonGroupState: '',
      buttons: [
        {
          text: 'Yes',
          value: true,
          buttonProps: {
            color: 'success',
          },
          icon: 'fa-check',
        },
        {
          text: '',
          value: 'maybe',
          buttonProps: {
            color: 'warning',
          },
          icon: 'fa-question',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
        {
          text: 'No',
          value: false,
          buttonProps: {
            color: 'red',
            // size: ''
          },
          icon: 'fa-times',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
      ],
    })

    return { ...toRefs(state) }
  },
})
</script>

Highlighting a button that user selected before

To be able to highlight a button that was selected before (or for any other purpose), you can use isSelectedBefore: true on the button model you send e.g.

buttons: [
  {
    text: 'Yes',
    value: true,
    buttonProps: {
      color: 'success',
    },
    icon: 'fa-check',
    isSelectedBefore: true,
  },
]

Show Code

<template>
  <div>
    <PDynamicButtonGroup v-model="buttonGroupState" :buttons="buttons" />
  </div>
</template>

<script>
import { PDynamicButtonGroup } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDynamicButtonGroup,
  },
  setup() {
    const state = reactive({
      buttonGroupState: '',
      buttons: [
        {
          text: 'Yes',
          value: true,
          buttonProps: {
            color: 'success',
          },
          icon: 'fa-check',
          isSelectedBefore: true,
        },
        {
          text: '',
          value: 'maybe',
          buttonProps: {
            color: 'warning',
          },
          icon: 'fa-question',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
        {
          text: 'No',
          value: false,
          buttonProps: {
            color: 'red',
            // size: ''
          },
          icon: 'fa-times',
          iconProps: {
            color: '',
            size: '',
            right: true,
          },
        },
      ],
    })

    return { ...toRefs(state) }
  },
})
</script>

API

src: pitcherify/src/components/PDynamicButtonGroup/PDynamicButtonGroup.vue fa fa-external-link

Pitcher props

Vuetify props

Inherits attributes from vuetify component: VBtnToggle

Pass props at: *   (* means root level as Pitcher props on the <VBtnToggle />)

Props listed below can be used on <PDynamicButtonGroup />

Events

Slots