fix(ui): PasswordInput 眼睛移入输入框,隐藏 Edge 原生显隐按钮

- Input 新增 suffix 插槽,眼睛不再并排在外
- 隐藏 ::-ms-reveal / ::-ms-clear,避免 Edge 聚焦时出现两个眼睛
- 展示页补 suffix 示例;COMPONENTS.md / README 同步;版本 0.3.1
This commit is contained in:
2026-10-30 08:59:22 +08:00
parent 93b1e41d28
commit ebe4af3dab
9 changed files with 76 additions and 44 deletions
+26 -1
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, FormField, Icon, Input, PasswordInput, Space, Text, Textarea } from '../../src'
import { Button, FormField, Icon, IconButton, Input, PasswordInput, Space, Text, Textarea } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'
@@ -93,6 +93,30 @@ export function Inputs() {
<Input size="lg" placeholder="大号 44(搜索框)" style={{ width: 320 }} />
</Demo>
<Demo
title="右侧插槽"
desc="suffix 放在输入框内部右端,适合放复制、显隐、单位这类单个小动作;和 clearable 同用时排在清除按钮之前。"
layout="column"
code={`<Input
placeholder="https://…"
suffix={<IconButton label="复制" size="xs" icon={<Icon name="copy_line" />} />}
/>`}
>
<Input
value={host}
onChange={(event) => setHost(event.target.value)}
suffix={
<IconButton
label="复制"
size="xs"
icon={<Icon name="copy_line" />}
onClick={() => void navigator.clipboard.writeText(host)}
/>
}
style={{ width: 320 }}
/>
</Demo>
<Demo
title="表单字段"
desc="FormField 负责「标签 + 控件 + 提示/错误」的排版;校验逻辑留在页面,错误出现时自动 role=alert。"
@@ -163,6 +187,7 @@ export function Inputs() {
rows={[
{ name: 'icon', type: 'IconName', desc: '左侧前缀图标' },
{ name: 'size', type: "'sm' | 'md' | 'lg'", defaultValue: "'md'", desc: '32 / 36 / 44px' },
{ name: 'suffix', type: 'ReactNode', desc: '右侧插槽(图标按钮、单位),排在清除按钮之前' },
{ name: 'clearable', type: 'boolean', defaultValue: 'false', desc: '有内容时显示清除按钮' },
{ name: 'onClear', type: '() => void', desc: '点击清除;不传则不显示按钮' },
{ name: 'shortcut', type: 'string', desc: '右侧快捷键提示(仅展示)' },