Button Stack

Example

Clicked:

Source Code

<template>
  <div>
    <div>
      <i>Clicked: {{ selectdButton }}</i>
      <c-button-stack size="medium" :list="threeItems" />
    </div>
    <div>
      <c-button-stack size="medium" :list="twoItems" />
    </div>
    <div>
      <c-button-stack size="medium" :list="oneItem" />
      <c-button-stack size="medium" keypad :list="oneItemForKeypad" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectdButton: null,
      threeItems: [
        {
          name: '첫번째',
          buttonStyle: 'primary',
          eventHandler: () => { this.handleClickLeftButton('첫번째') },
        },
        {
          name: '두번째',
          buttonStyle: 'secondary',
          eventHandler: () => { this.handleClickLeftButton('두번째') },
        },
        {
          name: '세번째',
          buttonStyle: 'tertiary',
          eventHandler: () => { this.handleClickLeftButton('세번째') },
        },
      ],
      twoItems: [
        {
          name: '첫번째',
          buttonStyle: 'primary',
          eventHandler: () => { this.handleClickLeftButton('첫번째') },
        },
        {
          name: '두번째',
          buttonStyle: 'secondary',
          eventHandler: () => { this.handleClickLeftButton('두번째') },
        },
      ],
      oneItem: [
        {
          name: '첫번째',
          buttonStyle: 'primary',
          eventHandler: () => { this.handleClickLeftButton('첫번째') },
        },
      ],
      oneItemForKeypad: [
        {
          name: '키패드 상단에 붙는 버튼',
          buttonStyle: 'primary',
          eventHandler: () => { this.handleClickLeftButton('키패드 상단에 붙는 버튼') },
        },
      ],
    }
  },
  methods: {
    handleClickLeftButton(msg) {
      this.selectdButton = msg
    },
  },
}
</script>

slots

...

props

...