ItemsRow 组件文档

组件概述

ItemsRow 是一个灵活的按钮行组件，用于渲染一组按钮或自定义内容。它基于 Ant Design 的 Button 组件构建，支持自定义渲染和主题配置。

组件属性 (Props)

IItemRowProps

属性名	类型	默认值	描述
route	Array<{ name: string; url?: string }>	-	路由信息数组（当前未在组件中使用）
items	IRowItem[]	-	按钮项配置数组，定义要渲染的按钮或自定义内容
style	React.CSSProperties	-	容器 div 的行内样式
className	string	-	容器 div 的额外类名
offsetTop	number	-	顶部偏移量（当前未在组件中使用）

IRowItem (按钮项配置)

属性名	类型	默认值	描述
label	string	-	按钮显示的文本内容
type	ButtonProps['type']	'primary'	按钮类型，继承自 Ant Design Button 的 type 属性
onClick	(e: any) => void	-	按钮点击事件处理函数
btnProps	ButtonProps	-	其他 Ant Design Button 属性
className	string	-	按钮项的额外类名
render	() => React.ReactNode	-	自定义渲染函数，如果提供则忽略其他按钮属性

使用示例

基本用法

<ItemsRow
    items={[
        { label: '保存', type: 'primary', onClick: handleSave },
        { label: '取消', type: 'default', onClick: handleCancel },
    ]}
/>

自定义渲染

<ItemsRow
    items={[
        {
            label: '提交',
            type: 'primary',
            onClick: handleSubmit,
            btnProps: {
                disabled: isSubmitting,
                icon: <UploadOutlined />,
            },
        },
    ]}
/>

自定义渲染函数

<ItemsRow
    items={[
        {
            render: () => (
                <Dropdown overlay={menu}>
                    <Button>
                        更多操作 <DownOutlined />
                    </Button>
                </Dropdown>
            ),
        },
    ]}
/>