Easy UI

Layout 布局 ​

通过基础的 24 分栏，迅速简便地创建布局。

TIP

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

列的基本单位为1，最多24个，最少0个。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-button/index.js";
  import "./node_modules/easy-component-ui/components/ea-button-group/index.js"; // 需要使用按钮组时才需引入
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础布局 ​ ​

使用列创建基础网格布局。

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

col-24col-12col-12col-8col-8col-8col-6col-6col-6col-6col-4col-4col-4col-4col-4col-4
查看代码
html
<div class="demo">
  <ea-row class="row-container">
    <ea-col span="24">
      <ea-button type="primary">col-24</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container">
    <ea-col span="12">
      <ea-button type="primary">col-12</ea-button>
    </ea-col>
    <ea-col span="12">
      <ea-button type="primary">col-12</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container">
    <ea-col span="8">
      <ea-button type="primary">col-8</ea-button>
    </ea-col>
    <ea-col span="8">
      <ea-button type="primary">col-8</ea-button>
    </ea-col>
    <ea-col span="8">
      <ea-button type="primary">col-8</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container">
    <ea-col span="6">
      <ea-button type="primary">col-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container">
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">col-4</ea-button>
    </ea-col>
  </ea-row>
</div>

分栏间隔 ​ ​

支持列间距。

行提供 gutter 属性来指定列之间的间距，其默认值为 0。

col-gutter-20col-gutter-20col-gutter-20col-gutter-20
查看代码
html
<div class="demo">
  <ea-row class="row-container" gutter="20">
    <ea-col span="6">
      <ea-button type="primary">col-gutter-20</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-gutter-20</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-gutter-20</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">col-gutter-20</ea-button>
    </ea-col>
  </ea-row>
</div>

混合布局 ​ ​

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

span-16span-8span-8span-8span-4span-4span-4span-16span-4
查看代码
html
<div class="demo">
  <ea-row class="row-container" gutter="20">
    <ea-col span="16">
      <ea-button type="primary">span-16</ea-button>
    </ea-col>
    <ea-col span="8">
      <ea-button type="primary">span-8</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="8">
      <ea-button type="primary">span-8</ea-button>
    </ea-col>
    <ea-col span="8">
      <ea-button type="primary">span-8</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
    <ea-col span="16">
      <ea-button type="primary">span-16</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
  </ea-row>
</div>

列偏移 ​ ​

您可以指定列偏移量。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

span-6span-6span-6span-6span-12
查看代码
html
<div class="demo">
  <ea-row class="row-container" gutter="20">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6" offset="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="6" offset="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6" offset="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="12" offset="6">
      <ea-button type="primary">span-12</ea-button>
    </ea-col>
  </ea-row>
</div>

列栅格偏移 ​

该属性是对 列偏移 属性的补充，用于改变列的左右偏移方式。

栅格向右偏移

span-4span-4span-4 push-4span-4 push-4

栅格向左偏移

span-4 offset-4span-4 offset-4span-4 pull-4 offset-4span-4 pull-4 offset-4
查看代码
html
<div class="demo">
  <p>栅格向右移动</p>
  <ea-row class="row-container" gutter="20">
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
    <ea-col span="4">
      <ea-button type="primary">span-4</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="4" push="4">
      <ea-button type="primary">span-4 push-4</ea-button>
    </ea-col>
    <ea-col span="4" push="4">
      <ea-button type="primary">span-4 push-4</ea-button>
    </ea-col>
  </ea-row>
  <p>栅格向左移动</p>
  <ea-row class="row-container" gutter="20">
    <ea-col span="4" offset="4">
      <ea-button type="primary">span-4 offset-4</ea-button>
    </ea-col>
    <ea-col span="4" offset="4">
      <ea-button type="primary">span-4 offset-4</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" gutter="20">
    <ea-col span="4" pull="4" offset="4">
      <ea-button type="primary">span-4 pull-4 offset-4</ea-button>
    </ea-col>
    <ea-col span="4" pull="4" offset="4">
      <ea-button type="primary">span-4 pull-4 offset-4</ea-button>
    </ea-col>
  </ea-row>
</div>

对齐方式 ​ ​

默认使用 flex 布局来对分栏进行灵活的对齐。

您可以通过 justify 属性来定义子元素的排版方式，其取值为start | center | end | space-between | space-around | space-evenly。

span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6span-6
查看代码
html
<div class="demo">
  <ea-row class="row-container">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" justify="center">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" justify="end">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" justify="space-between">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" justify="space-around">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
  <ea-row class="row-container" justify="space-evenly">
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
    <ea-col span="6">
      <ea-button type="primary">span-6</ea-button>
    </ea-col>
  </ea-row>
</div>

Row API ​

Row Attributes ​

属性名说明类型可选值默认值
gutter设置列之间的间距Number-0
justify定义子元素的排版方式String'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'start
align定义子元素的对齐方式String'top' | 'middle' | 'bottom'top
tag设置布局的标签String-div

Row Slots ​

插槽名说明
-默认内容

Col API ​

Col Attributes ​

属性名说明类型可选值默认值
span定义列所占的宽度比例Number0-2424
offset定义列左侧的偏移量Number0-240
push将列向右移动指定的列数Number0-240
pull将列向左移动指定的列数Number0-240
tag设置布局的标签String-div

Col Slots ​

插槽名说明
-默认内容

CSS Part ​

用法可参考 MDN ::part()伪类

Row CSS Part ​

名称说明
container容器

Col CSS Part ​

名称说明
container容器