是 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 表示让当前元素在父元素内垂直居中。

# 基础示例

可添加 styleclass 等属性设置样式。默认对齐方式是水平居左,垂直居上,等同于 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 - -