<template>
	<div>
		<h2>NumberBox Addons</h2>
		<div style="margin-bottom:10px">
			<Label for="n1" align="top">Icon:</Label>
			<NumberBox inputId="n1" :value="100" iconCls="icon-man" iconAlign="left"></NumberBox>
		</div>
		<div style="margin-bottom:10px">
			<Label for="n2" align="top">Clear button:</Label>
			<NumberBox inputId="n2" v-model="n2">
				<Addon>
					<span v-if="n2!=null" class="textbox-icon icon-clear" @click="n2=null"></span>
				</Addon>
			</NumberBox>
		</div>
		<div style="margin-bottom:10px">
			<Label for="n3" align="top">Button on left:</Label>
			<NumberBox inputId="n3" :value="100">
				<Addon align="left">
					<LinkButton iconCls="icon-search" :style="{borderRadius:0,borderWidth:'0 1px 0 0',width:'70px',height:'30px'}">Search</LinkButton>
				</Addon>
			</NumberBox>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				n2: 100
			}
		}
	}
</script>