feat(ui): 新增 TextButton / ToggleRow,Table 支持紧凑档
- TextButton:文字按钮(tone 主色/危险、可选图标、disabled), 用于表格行内操作,hover 只加下划线 - ToggleRow:左标签 + 右开关的开关行,支持 hint 与 switchLabel - Table:新增 size='md' | 'sm',sm 把行内边距收到 space-2 - 展示页:按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」; COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Icon, IconButton, Space } from '../../src'
|
||||
import { Button, Icon, IconButton, Space, TextButton } from '../../src'
|
||||
import { Demo } from '../components/Demo'
|
||||
import { PropsTable } from '../components/PropsTable'
|
||||
import { Section } from '../components/Section'
|
||||
@@ -126,6 +126,27 @@ export function Buttons() {
|
||||
</Space>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="文字按钮"
|
||||
desc="看起来像链接、行为像按钮,用在表格行内操作这类不需要外框的地方;需要底色或独立操作时仍用 Button。"
|
||||
layout="column"
|
||||
code={`<TextButton icon={<Icon name="add_line" />}>新建子分组</TextButton>
|
||||
<TextButton icon={<Icon name="edit_4_line" />}>编辑</TextButton>
|
||||
<TextButton tone="danger" icon={<Icon name="delete_2_line" />}>删除</TextButton>
|
||||
<TextButton disabled>禁用</TextButton>`}
|
||||
>
|
||||
<Space gap="lg" wrap>
|
||||
<TextButton icon={<Icon name="add_line" />}>新建子分组</TextButton>
|
||||
<TextButton icon={<Icon name="edit_4_line" />}>编辑</TextButton>
|
||||
<TextButton tone="danger" icon={<Icon name="delete_2_line" />}>
|
||||
删除
|
||||
</TextButton>
|
||||
<TextButton disabled icon={<Icon name="edit_4_line" />}>
|
||||
禁用
|
||||
</TextButton>
|
||||
</Space>
|
||||
</Demo>
|
||||
|
||||
<PropsTable
|
||||
rows={[
|
||||
{ name: 'variant', type: "'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'", defaultValue: "'primary'", desc: '语义变体' },
|
||||
@@ -148,6 +169,16 @@ export function Buttons() {
|
||||
{ name: 'spinning', type: 'boolean', defaultValue: 'false', desc: '图标旋转' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<PropsTable
|
||||
rows={[
|
||||
{ name: 'icon', type: 'ReactNode', desc: '前置图标' },
|
||||
{ name: 'tone', type: "'primary' | 'danger'", defaultValue: "'primary'", desc: '颜色语义' },
|
||||
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用态' },
|
||||
{ name: 'onClick', type: '() => void', desc: '点击回调' },
|
||||
{ name: 'title / label', type: 'string', desc: '悬停提示 / 无障碍名称' },
|
||||
]}
|
||||
/>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user