Vue

by Hiroki Osame

HTML

<script src="https://unpkg.com/vue-vnode-syringe@2.0.0/dist/vnode-syringe.js"></script>
<div id="app">
  <button-group disabled>
    <button
      class="button"
      type="submit"
    >
      Button 1
    </button>

    <button
      class="button"
      :disabled="false"
    >
      Button 2
    </button>
  </button-group>
</div>

CSS

#app {
  margin: 16px;
}

.button {
  border: 1px solid #ccc;
  padding: 8px 16px;
}

.button-group {
  display: flex;
}

.button-group__button {
  border-left-width: 0;
}

.button-group__button:first-child {
  border-radius: 3px 0 0 3px;
  border-left-width: 1px;
}

.button-group__button:last-child {
  border-radius: 0 3px 3px 0;
}

Vue

const ButtonGroup = {
	template: `
    <div class="button-group">
      <vnode-syringe
        class&="button-group__button"

        type!="button"

        :disabled="disabled"
      >
        <slot />
      </vnode-syringe>
    </div>
  `,
  
  components: {
  	VnodeSyringe,
  },

	props: {
		disabled: Boolean
	}
};


new Vue({
  el: "#app",
  components: {
  	ButtonGroup,
  },
});