<template>
  <div>
		<h2>Icon Align</h2>
		<ComboBox :data="alignOptions" :editable="false" v-model="align"></ComboBox>
		<div style="margin-top:20px">
			<LinkButton class="btn" iconCls="icon-add" :iconAlign="align">Add</LinkButton>
			<LinkButton class="btn" iconCls="icon-remove" :iconAlign="align">Remove</LinkButton>
			<LinkButton class="btn" iconCls="icon-save" :iconAlign="align">Save</LinkButton>
			<LinkButton class="btn" iconCls="icon-cut" :disabled="true" :iconAlign="align">Cut</LinkButton>
		</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      align: "left",
      alignOptions: [
        { value: "left", text: "Left" },
        { value: "right", text: "Right" },
        { value: "top", text: "Top" },
        { value: "bottom", text: "Bottom" }
      ]
    };
  }
};
</script>
<style>
.btn {
  min-width: 80px;
}
</style>