Carol UI

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

TIP

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

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

基础布局

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

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

<template>
  <cl-row>
    <cl-col :span="24"><div class="grid-content ep-bg-purple-dark" /></cl-col>
  </cl-row>
  <cl-row>
    <cl-col :span="12"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="12"><div class="grid-content ep-bg-purple-light" /></cl-col>
  </cl-row>
  <cl-row>
    <cl-col :span="8"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="8"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="8"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
  </cl-row>
  <cl-row>
    <cl-col :span="4"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="4"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="4"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="4"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="4"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="4"><div class="grid-content ep-bg-purple-light" /></cl-col>
  </cl-row>
</template>
<style lang="scss">
.cl-row {
  margin-bottom: 20px;
}
.cl-row:last-child {
  margin-bottom: 0;
}
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

分栏间隔

支持列间距。

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

<template>
  <cl-row :gutter="20">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
</template>

<style>
.cl-row {
  margin-bottom: 20px;
}
.cl-row:last-child {
  margin-bottom: 0;
}
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

混合布局

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

<template>
  <cl-row :gutter="20">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row :gutter="20">
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row :gutter="20">
    <cl-col :span="12" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
</template>

<style>
.cl-row {
  margin-bottom: 20px;
}
.cl-row:last-child {
  margin-bottom: 0;
}
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

列偏移

您可以指定列偏移量。

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

<template>
  <cl-row :gutter="20">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row :gutter="20">
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row :gutter="20">
    <cl-col :span="12" :offset="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
</template>

<style>
.cl-row {
  margin-bottom: 20px;
}
.cl-row:last-child {
  margin-bottom: 0;
}
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

对齐方式

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

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

<template>
  <cl-row class="row-bg">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row class="row-bg" justify="center">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row class="row-bg" justify="end">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row class="row-bg" justify="space-between">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row class="row-bg" justify="space-around">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
  <cl-row class="row-bg" justify="space-evenly">
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :span="6"><div class="grid-content ep-bg-purple" /></cl-col>
  </cl-row>
</template>

<style>
.cl-row {
  margin-bottom: 20px;
}
.cl-row:last-child {
  margin-bottom: 0;
}
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<template>
  <cl-row :gutter="10">
    <cl-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple-light" /></cl-col>
    <cl-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple" /></cl-col>
    <cl-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple-light" /></cl-col>
  </cl-row>
</template>

<style>
.cl-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

Row API

Row 属性

属性	描述	类型	默认值
gutter	栅格间隔	number	0
justify	flex 布局下的水平排列方式	enum `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'`	start
align	flex 布局下的垂直排列方式	enum `'top' \| 'middle' \| 'bottom'`	—
tag	自定义元素标签	string	div

Row 插槽

属性	描述	Subtags
default	自定义默认内容	Col

Col API

Col 属性

属性	描述	类型	默认值
span	栅格占据的列数	number	24
offset	栅格左侧的间隔格数	number	0
push	栅格向右移动格数	number	0
pull	栅格向左移动格数	number	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number / object `{span?: number, offset?: number, pull?: number, push?: number}`	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number / object `{span?: number, offset?: number, pull?: number, push?: number}`	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number / object `{span?: number, offset?: number, pull?: number, push?: number}`	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number / object `{span?: number, offset?: number, pull?: number, push?: number}`	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number / object `{span?: number, offset?: number, pull?: number, push?: number}`	—
tag	custom element tag	string	div

Col 插槽

属性	描述
default	customize default content

基础布局 ​

分栏间隔 ​

混合布局 ​

列偏移 ​

对齐方式 ​

响应式布局 ​

Row API ​

Row 属性 ​

Row 插槽 ​

Col API ​

Col 属性 ​

Col 插槽 ​