ShadowUI3

# 布局系统

版本：v2.3.11

ShadowUI3 提供了一套基于 CSS 类的布局系统，用于构建页面的整体结构，支持多种布局方式，如弹性布局、栅格布局、网格布局等。

# 快速开始

# 弹性布局

<!-- 基础弹性布局 -->
<div class="ui-flex">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
  <div class="ui-flex-c">项目3</div>
</div>

<!-- 12栅格弹性布局（每3个项目一行） -->
<div class="ui-flex ui-flex-3">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
  <div class="ui-flex-c">项目3</div>
  <div class="ui-flex-c">项目4</div>
  <div class="ui-flex-c">项目5</div>
  <div class="ui-flex-c">项目6</div>
</div>

# 网格布局

<!-- 基础网格布局 -->
<div class="ui-grid">
  <div class="ui-grid-6">占6列</div>
  <div class="ui-grid-6">占6列</div>
</div>

<!-- 带间距的网格布局 -->
<div class="ui-grid ui-space-padding-2">
  <div class="ui-grid-4">占4列</div>
  <div class="ui-grid-4">占4列</div>
  <div class="ui-grid-4">占4列</div>
</div>

# 布局类型

# 1. 弹性布局

# 基础弹性布局

  • 类名：ui-flex
  • 说明：创建一个弹性容器，子元素默认水平排列
  • 示例：
    <div class="ui-flex">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
</div>

# 12栅格弹性布局

  • 类名：ui-flex-{n}（n 取值范围：1-12）
  • 说明：指定一行显示 n 个项目，自动换行
  • 示例：
    <!-- 一行显示2个项目 -->
<div class="ui-flex ui-flex-2">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
  <div class="ui-flex-c">项目3</div>
  <div class="ui-flex-c">项目4</div>
</div>

# 自动适应布局

  • 类名：ui-flex-auto
  • 说明：自动适应子元素宽度，常用布局
  • 示例：
    <div class="ui-flex-auto">
  <div class="ui-flex-body">常规内容</div>
</div>

<div class="ui-flex-auto">
  <div class="ui-flex-c">左侧固定</div>
  <div class="ui-flex-body">中间自适应</div>
  <div class="ui-flex-c">右侧固定</div>
</div>

# 自动平分布局

  • 类名：ui-flex-bisect
  • 说明：子元素自动平分容器宽度
  • 示例：
    <div class="ui-flex-bisect">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
  <div class="ui-flex-c">项目3</div>
</div>

# 两边分布布局

  • 类名：ui-flex-between
  • 说明：子元素两端对齐，中间自动分配空间
  • 示例：
    <div class="ui-flex-between">
  <div class="ui-flex-c">左侧内容</div>
  <div class="ui-flex-c">右侧内容</div>
</div>

# 2. 网格布局

# 基础网格布局

  • 类名：ui-grid
  • 说明：创建一个基于 12 列的网格容器
  • 示例：
    <div class="ui-grid">
  <div class="ui-grid-1">占1列</div>
  <div class="ui-grid-11">占11列</div>
</div>

# 列宽设置

  • 类名：ui-grid-{n}（n 取值范围：1-12）
  • 说明：指定网格项目占 n 列宽度
  • 示例：
    <div class="ui-grid">
  <div class="ui-grid-3">占3列</div>
  <div class="ui-grid-4">占4列</div>
  <div class="ui-grid-5">占5列</div>
</div>

# 布局属性

# 1. 方向控制

类名 说明
ui-flex-column 垂直布局
ui-flex-row-reverse 水平反向布局
ui-flex-column-reverse 垂直反向布局

# 2. 对齐方式

类名 说明
ui-justify-start 主轴起始对齐
ui-justify-center 主轴居中对齐
ui-justify-end 主轴结束对齐
ui-justify-between 主轴两端对齐
ui-justify-around 主轴均匀分布
ui-justify-evenly 主轴等间距分布
ui-align-start 交叉轴起始对齐
ui-align-center 交叉轴居中对齐
ui-align-end 交叉轴结束对齐
ui-align-stretch 交叉轴拉伸对齐

# 3. 间距控制

类名 说明
ui-space-padding-{n} 内间距（n 取值：1-10）
ui-space-margin-{n} 外间距（n 取值：1-10）
ui-grid-gap-{n} 网格间距（n 取值：1-10）

# 4. 边框控制

类名 说明
ui-layout-border 布局边框
ui-border-bottom 仅底部边框
ui-border-right 仅右侧边框

# 高级用法

# 1. 布局嵌套

<!-- 弹性布局嵌套 -->
<div class="ui-flex ui-flex-1">
  <div class="ui-flex-c" style="background: #79C48C; padding: 20rpx;">
    <div class="ui-flex ui-flex-1">
      <div class="ui-flex-c">
        <text class="flex-demo" style="background: #38814A;">ui-flex-1</text>
      </div>
    </div>
    <div class="ui-flex ui-flex-2">
      <div class="ui-flex-c">
        <text class="flex-demo" style="background: #49A761;">ui-flex-2</text>
      </div>
      <div class="ui-flex-c">
        <text class="flex-demo" style="background: #63BA79;">ui-flex-2</text>
      </div>
    </div>
  </div>
</div>

<!-- 网格布局嵌套 -->
<div class="ui-grid ui-space-padding-6">
  <div class="ui-grid-6" style="background: #79C48C;">
    <div class="ui-grid ui-space-padding-2">
      <div class="ui-grid-7" style="background: #38814A;">
        7
      </div>
      <div class="ui-grid-5" style="background: #49A761;">
        5
      </div>
    </div>
  </div>
  <div class="ui-grid-6" style="background: #57b36e;">
    6
  </div>
</div>

# 2. 空白占位符

<!-- 使用空白占位符 -->
<div class="ui-flex">
  <div class="ui-flex-c">左侧</div>
  <div class="ui-flex-spacer"></div>
  <div class="ui-flex-c">右侧</div>
</div>

# 3. 布局组合

<!-- 方向控制 + 对齐方式 -->
<div class="ui-flex ui-flex-column ui-justify-center ui-align-center" style="height: 300px; background: #f0f0f0;">
  <div class="ui-flex-c">垂直居中</div>
  <div class="ui-flex-c">内容</div>
</div>

<!-- 栅格 + 反向布局 -->
<div class="ui-flex ui-flex-3 ui-flex-row-reverse">
  <div class="ui-flex-c">项目1</div>
  <div class="ui-flex-c">项目2</div>
  <div class="ui-flex-c">项目3</div>
</div>

# 布局类汇总

布局类型 类名 说明
弹性布局 ui-flex 基础弹性布局
弹性布局 ui-flex-{n} 12栅格弹性布局（n: 1-12）
弹性布局 ui-flex-auto 自动适应布局
弹性布局 ui-flex-bisect 自动平分布局
弹性布局 ui-flex-between 两边分布布局
网格布局 ui-grid 基础网格布局
网格布局 ui-grid-{n} 12列网格布局（n: 1-12）
方向控制 ui-flex-column 垂直布局
方向控制 ui-flex-row-reverse 水平反向布局
对齐方式 ui-justify-* 主轴对齐方式
对齐方式 ui-align-* 交叉轴对齐方式
间距控制 ui-space-* 间距控制
边框控制 ui-layout-border 布局边框

# 注意事项

  1. 布局系统基于 Flexbox 实现，支持所有 Flexbox 相关的 CSS 属性
  2. ui-flex-{n} 和 ui-grid-{n} 中的 n 取值范围为 1-12
  3. 可以通过组合不同的布局类实现复杂的页面结构
  4. 布局类可以与其他 UI 组件结合使用
  5. 响应式布局可以通过媒体查询结合布局类实现

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/layout/layout

← 图标库 →