Skip to content

增强 Row/Col 布局组件以支持 ContainerQuery #51390

@ilxqx

Description

@ilxqx

What problem does this feature solve?

目前 Row/Col 的布局虽说解决了些问题,但是比较局限和鸡肋,为什么呢?目前的响应式是根据整个屏幕的宽度来的,这个对于设计网站首页或以整个屏幕为基准的界面设计是没问题的,但是对于中后台页面不怎么适用,比如对于增删改查的表单,一般都是弹框式的,而这个弹框的宽度肯定只是有限的(一般小于屏幕的宽度,大于在40%-70%的屏幕宽度之间),而此时如果在Dialog中的表单上使用Row/Col 布局组件显然响应式断点整体的宽度应该相对于Dialog的宽度而不是整个屏幕的宽度。

What does the proposed API look like?

可以在Row组件上增加一个属性:responsiveMode: 'screen' | 'container' 来控制响应式基于的对象模式(是屏幕宽度还是父级容器宽度)来解决这个问题。
这里可能还需要增加一个配置属性来配置 不同响应式断点的 宽度,虽说相对于屏幕的响应式断点可以通过ConfigProvider的形式全局配置,但是相对于容器的响应式断点就只能每次使用时单独配置(因为具体的父级容器宽度无法做事先的假定)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions