12 results

https://

52% used

安装

pnpm dlx shadcn-vue@latest add input-group

用法

<script setup lang="ts">
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/components/ui/input-group'
</script>

<template>
  <InputGroup>
    <InputGroupInput placeholder="搜索..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupButton>搜索</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>

示例

图标

文本

在输入框旁边显示额外的文本信息。

$

USD

https://

.com

@company.com

120 characters left

按钮

添加按钮以在输入组内执行操作。

https://

工具提示

添加工具提示以提供额外的上下文或帮助。

文本区域

输入组也适用于文本区域组件。使用 block-start 或 block-end 进行对齐。

Line 1, Column 1

script.js

加载指示器

在处理输入时显示加载指示器。

Saving...

Please wait...

标签

在输入组内添加标签以提高可访问性。

@

Email

下拉菜单

将输入组与下拉菜单配对以实现复杂的交互。

按钮组

用按钮组包装输入组以创建前缀和后缀。

https://

.com

自定义输入

向您的自定义输入添加 data-slot="input-group-control" 属性，以实现自动行为和焦点状态处理。

<script lang='ts' setup>
import { InputGroup, InputGroupAddon, InputGroupButton } from '@/registry/default/ui/input-group'
</script>

<template>
  <div class="grid w-full max-w-sm gap-6">
    <InputGroup>
      <textarea
        data-slot="input-group-control"
        class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
        placeholder="自动调整大小的文本区域..."
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton class="ml-auto" size="sm" variant="default">
          提交
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

API 参考

InputGroup

包装输入框和附加组件的主要组件。

属性	类型	默认值
class	string

<template>
  <InputGroup>
    <InputGroupInput />
    <InputGroupAddon />
  </InputGroup>
</template>

InputGroupAddon

在输入框旁边显示图标、文本、按钮或其他内容。

::info 为了实现正确的焦点导航，InputGroupAddon 组件应放置在输入框之后。设置 align 属性来定位附加组件。 ::

属性	类型	默认值
align	"inline-start" | "inline-end" | "block-start" | "block-end"	'inline-start'
class	string

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

对于 <InputGroupInput />，使用 inline-start 或 inline-end 对齐方式。对于 <InputGroupTextarea />，使用 block-start 或 block-end 对齐方式。

InputGroupAddon 组件可以包含多个 InputGroupButton 组件和图标。

<template>
  <InputGroupAddon>
    <InputGroupButton>按钮</InputGroupButton>
    <InputGroupButton>按钮</InputGroupButton>
  </InputGroupAddon>
</template>

InputGroupButton

在输入组内显示按钮。

属性	类型	默认值
size	"xs" | "icon-xs" | "sm" | "icon-sm"	"xs"
variant	"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"	"ghost"
class	string

<template>
  <InputGroupButton>按钮</InputGroupButton>
  <InputGroupButton size="icon-xs" aria-label="复制">
    <CopyIcon />
  </InputGroupButton>
</template>

InputGroupInput

构建输入组时替代 <Input /> 的组件。此组件预应用了输入组样式，并使用统一的 data-slot="input-group-control" 进行焦点状态处理。

属性	类型	默认值
class	string

所有其他属性都会传递给底层的 <Input /> 组件。

<template>
  <InputGroup>
    <InputGroupInput placeholder="输入文本..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
</template>

InputGroupTextarea

构建输入组时替代 <Textarea /> 的组件。此组件预应用了文本区域组样式，并使用统一的 data-slot="input-group-control" 进行焦点状态处理。

属性	类型	默认值
class	string

所有其他属性都会传递给底层的 <Textarea /> 组件。

<template>
  <InputGroup>
    <InputGroupTextarea placeholder="输入消息..." />
    <InputGroupAddon align="block-end">
      <InputGroupButton>发送</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>