Open UI5 控件实现响应式布局的两种配置模式

举报
汪子熙 发表于 2023/03/18 10:10:17 2023/03/18
【摘要】 响应式配置有两种方式:自动弹出模式和手动弹出模式(open ui5.m.Table,属性:autoPopinMode)。自动弹出模式(autoPopinMode)确保自动响应,并且在大多数场合下已经足够。开发人员仍然可以影响每列的行为,不过影响范围有限。手动模式更灵活,但需要更多的配置。当可以显示/隐藏或重新排序表格列时,此配置变得更加麻烦。但这些额外的付出也有回报:只有手动模式能够允许开发...

响应式配置有两种方式:自动弹出模式和手动弹出模式(open ui5.m.Table,属性:autoPopinMode)。

自动弹出模式(autoPopinMode)确保自动响应,并且在大多数场合下已经足够。开发人员仍然可以影响每列的行为,不过影响范围有限。

手动模式更灵活,但需要更多的配置。当可以显示/隐藏或重新排序表格列时,此配置变得更加麻烦。但这些额外的付出也有回报:

只有手动模式能够允许开发人员:

  • 让表格布局中多留一列
  • 一次将多列移动到弹出区域

在这两种模式下,响应式表格确保至少一列始终保留在表格布局中。

自动弹出模式

自动弹出模式自动处理响应。 您可以通过调整每列的行为在一定程度上优化这一点。

列有最小宽度。 一旦所有可见列的宽度超过表格宽度,最右边的列就会移动到弹出区域。 每列的默认最小宽度为 8 rem。 您可以为每一列更改此值(open ui5.m.Column,属性:autoPopinWidth)。

要进一步影响行为,您可以为列分配优先级。 低优先级列首先移动到弹出区域(首先是最右边的低优先级列),然后是中优先级列,最后是高优先级列。 默认优先级为“无”,处理方式与“中等”优先级相同(open ui5.m.Column,属性:importance)。

除了将列移动到弹出区域之外,您还可以隐藏一个或多个优先级的列(属性:hiddenInPopin)。

在自动弹出模式下,所有其他与弹出相关的列设置都将被忽略。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。