组件
<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>
<template>
<Input type="email" placeholder="Email" />
</template>安装
🌐 Installation
pnpm dlx shadcn-vue@latest add input
用法
🌐 Usage
<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>
<template>
<Input />
</template>示例
🌐 Examples
默认
🌐 Default
<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>
<template>
<Input type="email" placeholder="Email" />
</template>文件
🌐 File
<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
</script>
<template>
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
</template>已禁用
🌐 Disabled
<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>
<template>
<Input disabled type="email" placeholder="Email" />
</template>带标签
🌐 With Label
<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
</script>
<template>
<div class="grid w-full max-w-sm items-center gap-1.5">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="Email" />
</div>
</template>带按钮
🌐 With Button
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
</script>
<template>
<div class="flex w-full max-w-sm items-center space-x-2">
<Input type="email" placeholder="Email" />
<Button type="submit">
Subscribe
</Button>
</div>
</template>