feat(textarea): 新增多行文本组件

- rows / resize / invalid,样式与 Input 一致(焦点只换边框)
- 契约、展示页(#inputs)、README 计数 40 → 41、变更记录同步
This commit is contained in:
stash
2026-10-29 12:58:32 +08:00
parent 12e3047f1a
commit 0d5d7753e2
6 changed files with 113 additions and 2 deletions
+26 -1
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, FormField, Icon, Input, Space, Text } from '../../src'
import { Button, FormField, Icon, Input, Space, Text, Textarea } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'
@@ -120,6 +120,19 @@ export function Inputs() {
</div>
</Demo>
<Demo
title="多行文本"
desc="Textarea 用于 Markdown 正文、简介这类长文本;行数可调,默认只允许竖向拖拽。"
layout="column"
code={`<Textarea rows={5} placeholder="支持 Markdown…" />
<Textarea rows={3} resize="none" invalid />`}
>
<div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 12 }}>
<Textarea rows={5} placeholder="写点什么,支持 Markdown:## 标题、**粗体**、[链接](url)" />
<Textarea rows={3} resize="none" invalid placeholder="校验失败时的样子(invalid)" />
</div>
</Demo>
<PropsTable
rows={[
{ name: 'icon', type: 'IconName', desc: '左侧前缀图标' },
@@ -132,6 +145,18 @@ export function Inputs() {
{ name: '…rest', type: 'InputHTMLAttributes', desc: '透传原生属性,onChange 是原生事件' },
]}
/>
<Text size="sm" tone="muted" style={{ marginTop: 24 }}>
Textarea
</Text>
<PropsTable
rows={[
{ name: 'rows', type: 'number', defaultValue: '4', desc: '初始可见行数' },
{ name: 'resize', type: "'none' | 'vertical'", defaultValue: "'vertical'", desc: '是否允许拖拽改高' },
{ name: 'invalid', type: 'boolean', defaultValue: 'false', desc: '红边框 + aria-invalid' },
{ name: '…rest', type: 'TextareaHTMLAttributes', desc: '透传原生属性' },
]}
/>
</Section>
)
}