Easy UI

Appearance

Layout 布局 ​

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

TIP

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

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

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

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-layout.js";
</script>
js
import "easy-component-ui/ea-layout";

自定义样式 ​

移步到 CSS Part。

基础布局 ​

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

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

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

分栏间隔 ​

支持列间距。

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

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

混合布局 ​

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

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

列偏移 ​

您可以指定列偏移量。

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

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

列栅格偏移 ​

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

栅格向右偏移

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
<p>栅格向右偏移</p>
<ea-row class="row-container" gutter="20">
  <ea-col span="4">
    <ea-button variant="primary">span-4</ea-button>
  </ea-col>
  <ea-col span="4">
    <ea-button variant="primary">span-4</ea-button>
  </ea-col>
</ea-row>
<ea-row class="row-container" gutter="20">
  <ea-col span="4" push="4">
    <ea-button variant="primary">span-4 push-4</ea-button>
  </ea-col>
  <ea-col span="4" push="4">
    <ea-button variant="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 variant="primary">span-4 offset-4</ea-button>
  </ea-col>
  <ea-col span="4" offset="4">
    <ea-button variant="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 variant="primary">span-4 pull-4 offset-4</ea-button>
  </ea-col>
  <ea-col span="4" pull="4" offset="4">
    <ea-button variant="primary">span-4 pull-4 offset-4</ea-button>
  </ea-col>
</ea-row>

对齐方式 ​

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

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

通过 align 属性来定义子元素的垂直对齐方式，其取值为top | middle | bottom。

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

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 CSS Part ​

名称说明
container容器元素

Row Slots ​

名称说明
default默认插槽，用于放置 ea-col

Row CSS Custom Properties ​

属性名说明默认值
--ea-row-gutter列间距（半值）0px
--ea-row-justify水平排列方式start
--ea-row-align垂直对齐方式top

Col API ​

Col Attributes ​

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

Col CSS Part ​

名称说明
container容器元素

Col Slots ​

名称说明
default默认插槽，用于列内容

Col CSS Custom Properties ​

属性名说明默认值
--ea-col-span栅格占据的列数24
--ea-col-offset栅格左侧的间隔格数0
--ea-col-push栅格向右移动格数0
--ea-col-pull栅格向左移动格数0