<template>
	<div class="input">
		<div class="header">Input 输入框</div>

		<div class="item">
			<div class="title">基本使用</div>
			<div class="input-content">
				<h-input placeholder="基本使用" />
			</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 class="item item-input-size">
			<div class="title">大小</div>
			<div class="input-content">
				<h-input placeholder="default" />
				<h-input placeholder="large size" size="large" />
			</div>

			<pre>
				<code class="code">
					<<span class="h-name">h-input</span> <span class="h-attr">placeholder</span>=<span class="h-string">"default"</span>/>

					<<span class="h-name">h-input</span> <span class="h-attr">placeholder</span>=<span class="h-string">"large size"</span> <span class="h-attr">size</span>=<span class="h-string">"large"</span>/>
				</code>
			</pre>
		</div>

		<div class="item item-input-search">
			<div class="title">前缀和后缀</div>
			<div class="input-content">
				<h-input nativeType="search" placeholder="search">
					<i class="iconfont icon-user"></i>
					<i class="iconfont icon-search"></i>
				</h-input>
			</div>

			<pre>
				<code class="code">
					<<span class="h-name">h-input</span> <span class="h-attr">nativeType</span>=<span class="h-string">"search"</span> <span class="h-attr">placeholder</span>=<span class="h-string">"search"</span>>
						<<span class="h-name">i</span> <span class="h-attr">class</span>=<span class="h-string">"iconfont icon-user"</span>></<span class="h-name">i</span>>
						<<span class="h-name">i</span> <span class="h-attr">class</span>=<span class="h-string">"iconfont icon-search"</span>></<span class="h-name">i</span>>
					</<span class="h-name">h-input</span>>
				</code>
			</pre>
		</div>

		<div class="item item-input-search">
			<div class="title">数字</div>
			<div class="input-content">
				<h-input nativeType="number" placeholder="686868" />
			</div>

			<pre>
				<code class="code">
					<<span class="h-name">h-input</span> <span class="h-attr">nativeType</span>=<span class="h-string">"number"</span> <span class="h-attr">placeholder</span>=<span class="h-string">"number"</span>>
				</code>
			</pre>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'input',
		data() {
			return {}
		},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss">
	.input {
		.item {
			padding: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			overflow: hidden;

			.title {
				font-size: 14px;
				margin-bottom: 10px;
			}

			&.item-input-size {
				.input-content {
					overflow: hidden;
				}

				.h-input-wapper {
					width: 150px;
					margin-right: 10px;
				}
			}
		}
	}
</style>