项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
双端兼容 · 桌面 + 移动

Container 容器 ​

EvContainer 是官网栅格的基座:居中限宽 + 两侧留白。组件化的意义在于宽度档可以语义化选择, 并受 --ev-container-width 令牌约束 —— 通过 EvConfigProvider 可以整站调整容器宽度。

基础用法 ​

四种宽度档
演示区宽度不足以放下真实档位,下图以 1360px 为基准等比缩放展示各档占比;窄于档位宽度时容器自适应收缩。
narrow
920px
default
1152px
wide
1360px
full
通栏 100%(不设上限)

wide 与 full 在超宽屏上才有区别:wide 上限 1360px,full 始终铺满视口;通过主题定制器改小容器宽令牌时,narrow / default 会同步收缩。

vue
<EvContainer width="narrow">
  <FaqSection />
</EvContainer>

组件内置容器

EvHero、EvFooter、EvNavbar、EvCta 内部已内置容器, 无需再包一层;EvSection 可直接声明 width 档;EvContainer 用于其余自定义区块的外层对齐。

API ​

Props ​

属性说明类型默认值
width宽度档'narrow' | 'default' | 'wide' | 'full''default'
as渲染标签string'div'

插槽 ​

插槽说明
default容器内容

基于 MIT 许可证发布