区块-移动端|飞书低代码平台

区块-移动端|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
概述
「区块」作为布局类组件,一方面的作用是帮助开发者实现更好的页面布局效果,另一方面是可以实现灵活的显隐效果。
适用场景
  • 实现更灵活的布局
在图表搭建时,有时候需要指定看板中不同图表之间的布局关系,比如下图实现了一行分别为 1、2、3、4 个图表时的效果:
250px|700px|reset
image.png
  • 支持显隐设置
在搭建页面时,有时候希望不同的模块有不同的浏览权限,比如针对不同身份的用户开放不同的入口,就是显隐设置典型的应用场景,通过区块组件可以对放置在其中的其他组件实现显隐设置。
属性的配置
  1. 交互
  1. 事件动作配置步骤说明,点击查看:页面事件与动作说明
  1. 支持加载中
250px|700px|reset
image.png
  1. 外观,主要通过前端 Flex 实现页面布局,支持以下能力:
  1. 布局方向
  1. 网格间距
  1. 主轴对齐,指与布局方向同方向的对齐方式
  1. 当布局方向为水平时,指水平方向的对齐
  1. 当布局方向为垂直时,指垂直方向的对齐
  1. 交叉轴对齐,指与布局方向垂直方向的对齐方式
  1. 当布局方向为水平时,指垂直方向的对齐
  1. 当布局方向为垂直时,指水平方向的对齐
  1. 宽度
  1. 高度
  1. 位置类型
  1. 外边距
  1. 内边距
  1. 隐藏,控制区块和区块内组件在页面中的显示与隐藏
  1. 样式设置细节说明,点击查看:页面布局与样式设计
可查看视频,对比效果:
250px|700px|reset
对比效果.gif
暴露的状态
属性名称
API
类型
描述
是否隐藏
hidden
boolean
是否加载中
loading
boolean
提示信息
tooltipText
string
鼠标 Hover 时的提示信息
布局方向
-
  • 水平
  • 垂直
  • 水平换行
网格间距
-
number
控制子组件之间的间隙
主轴对齐
-
  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中
  • space-betwen 两端对齐
  • space-around 间隔相等
主轴对齐,指与布局方向同方向的对齐方式
  • 当布局方向为水平时,指水平方向的对齐
  • 当布局方向为垂直时,指垂直方向的对齐
交叉轴对齐
-
  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 中点对齐
  • baseline 文字第一行基线对齐
  • stretch 拉伸对齐(新增
交叉轴对齐,指与布局方向垂直方向的对齐方式
  • 当布局方向为水平时,指垂直方向的对齐
  • 当布局方向为垂直时,指水平方向的对齐
多行对齐
-
  • start 起点对齐
  • end 终点对齐
  • center 中心对齐
  • space-between 两端对齐
  • space-around 间隔相等
  • stretch 拉伸对齐
flex 布局的 align-content 属性,控制“多条主轴”的 flex 项目在交叉轴的对齐
位置类型
-
  • static 默认
  • relative 相对
  • absolute 绝对
  • fixed 固定
  • sticky 粘性
css 的 position 属性,控制组件的定位方式
暴露的方法
方法名称
类型
描述
setHidden(v: boolean)
function
设置表格的 hidden 属性
setLoading(v: boolean)
function
设置表格的 loading 属性
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用