[ant-design]Space的size也生成SizeContext

2024-07-05 998 views
4

保持api的一致性,简化页面开发工作量

目前的Space和Space.Compact都有size属性,但含义不同 经常有一堆Button组成的功能区(比如一个页面的fixed Footer)代码如下

function Page() {
  return <div>
    <Form />
    <Table />
    {/* fixed footer */}
    <Space>
      <Button>新增</Button>
      <Button>批量删除</Button>
      <Button>下载</Button>
    </Space>
  </div>
}

此时如果希望页脚的按钮区全部为large就需要逐一设置

希望Space.size === Space.Compact.size,创建一个能被下层组件消费的SpaceContext

然后做一个break change,把当前的Space.size重命名(maybe gap?)

function Page() {
  return <div>
    <Form />
    <Table />
    {/* fixed footer */}
    <Space size="large" gap={32}>
      <Button>新增</Button>
      <Button>批量删除</Button>
      <Button>下载</Button>
    </Space>
  </div>
}

回答

6

想要设置全局的 size 应该用 ConfigProvider 而不是 Space,Space 只是 SizeContext 的消费者

8
<ConfigProvider componentSize="large">
      <Button>新增</Button>
      <Button>批量删除</Button>
      <Button>下载</Button>
</ConfigProvider>
0

可以自行封装一个带 ConfigProvider 的 Space 组件,antd 侧不会去做 breaking change。

2

这样会不会有点滥用ConfigProvider了,毕竟官方文档里ConfigProvider的中文就是“全局化”配置。。。= =

4

这个“全局化”感觉可以删掉。