Engage 开放平台文档

是 Engage 前端布局基本组件（相当于 div 之于 HTML）。使用 flex 布局，默认模拟 div 行为。它可以很方便地进行定位、对齐、宽高自适应。

# 关于对齐（align）

  • 可设置子元素的垂直（vertical align）和水平对齐（horizontal align），支持类似 padding 的多段式表示方式（先垂直后水平）。如 align="center start" 表示垂直居中，水平居左——不管当前是水平还是垂直布局（flex-direction: row/column）。
  • 每个对齐方式有 start、center、end、justify 四种值，等价于 flex 布局中的对应值。注意，justify 只对主轴有效（等价于 justify-content: space-between）。至于 space-around、space-evenly 可以考虑用 padding + margin 实现。
  • 子元素要覆盖父元素设置的对齐，可以利用 align-self、margin。推荐使用 margin，更加灵活强大。比如 margin:auto 0 表示让当前元素在父元素内垂直居中。

# 基础示例

可添加 style、class 等属性设置样式。默认对齐方式是水平居左，垂直居上，等同于 align="start"。

# align 参数使用

# 水平布局下的 align 对子组件的效果

# 垂直布局下的 align 对子组件的效果

# 使用 margin 覆盖父组件的 align

# wrap 参数使用

# EBlock

# Props

Name Description Type Required Default
tag 使用何种 DOM 标签 String false div
horizontal 是否水平布局，即对应 flex-direction: row。默认为 flex-direction: column，模拟 div 的行为 Boolean false -
color 字体颜色，支持 primary 等预定义主题颜色 String false -
align 设置子元素的垂直（vertical align）和水平对齐（horizontal align），支持类似 padding 的多值表示方式（先垂直后水平），每个对齐方式有 start、center、end、justify 四种值。注意，justify 只对主轴有效（等价于 justify-content: space-between。至于 space-around、space-evenly 可以考虑用 padding + margin 实现 String false -
wrap 是否在子元素超出块大小时自动折行 Boolean false -

# Slots

Name Description Default Slot Content
default - -

← EText →