feat(textarea): 新增多行文本组件
- rows / resize / invalid,样式与 Input 一致(焦点只换边框) - 契约、展示页(#inputs)、README 计数 40 → 41、变更记录同步
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user