<template>
	<div class="button">
		<div class="header">Button 按钮</div>

		<div class="item">
			<div class="title">按钮类型</div>
			<div class="input-content">
				<h-button>Default</h-button>
				<h-button type="primary">Primary</h-button>
				<h-button type="secuess">secuess</h-button>
				<h-button type="info">info</h-button>
				<h-button type="warning">warning</h-button>
				<h-button type="danger">Danger</h-button>
				<h-button type="dash">Dashed</h-button>
			</div>

			<pre>
				<code class="code">
					<<span class="h-name">h-input</span> <span class="h-attr">placeholder</span>=<span class="h-string">"基本使用"</span>/>
				</code>
			</pre>
		</div>

		<div>
			<h-button size="mini">Small</h-button>
			<h-button size="small">Small</h-button>
			<h-button>Primary</h-button>
			<h-button size="lager">Lager</h-button>
		</div>

		<div>
			<h-button type="primary" round>round</h-button>
			<h-button type="primary" circle>circle</h-button>
			<h-button type="primary" size="lager" circle>lager</h-button>
		</div>

		<div class="block">
			<h-button type="primary" block @click="handlerClick">block</h-button>
			<h-button type="primary" block disabled>disabled</h-button>
		</div>

		<div>
			<h-button type="primary" block size="lager" animate="ripple">ripple</h-button>
		</div>

		<div class="btn-group">
			<h-button-group>
				<h-button>left</h-button>
				<h-button>right</h-button>
			</h-button-group>

			<h-button-group>
				<h-button size="small">left</h-button>
				<h-button size="small">right</h-button>
			</h-button-group>

			<h-button-group>
				<h-button>left</h-button>
				<h-button>middle</h-button>
				<h-button>right</h-button>
			</h-button-group>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'button',
		methods: {
			handlerClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style scoped>
	.button {}

	.button div {
		padding: 10px;
		margin-bottom: 10px;
	}

	.button button {
		margin-bottom: 10px;
	}

	.button div button+button{
		margin-left: 10px;
	}

	.button div.block button {
		margin-left: 0;
	}

	.button .btn-group button {
		margin: 0;
	}
</style>
