Pro Element Plus

Appearance

ProCol 响应式栅格布局 ​

用于响应式栅格布局，默认 xs: 24 sm: 12 md: 8 lg: span || 24 xl: span || 24

基础用法 ​

需配合 el-row 使用。

<template>
  <el-row :gutter="20">
    <pro-col v-for="i in 6" :span="4" :key="i">
      <div class="col-item"></div>
    </pro-col>
  </el-row>
</template>

<script setup lang="ts">
import { ElRow } from 'element-plus'
</script>

<style scoped>
.col-item {
  height: 36px;
  margin-bottom: 20px;
  border-radius: 5px;
  background: var(--vp-c-gray-3);
}
</style>

自由组合 ​

配合 use-grid 和 is-full 属性，可以自由组合布局。

不使用栅格布局
不使用栅格布局，且填充

<template>
  <el-row :gutter="20">
    <pro-col :span="4">
      <div class="col-item"></div>
    </pro-col>

    <pro-col :use-grid="false">
      <div class="col-item">不使用栅格布局</div>
    </pro-col>

    <pro-col :span="6">
      <div class="col-item"></div>
    </pro-col>

    <pro-col :use-grid="false" is-full>
      <div class="col-item">不使用栅格布局，且填充</div>
    </pro-col>

    <pro-col>
      <div class="col-item"></div>
    </pro-col>
  </el-row>
</template>

<script setup lang="ts">
import { ElRow } from 'element-plus'
</script>

<style scoped>
.col-item {
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  padding: 0 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  background: var(--vp-c-gray-3);
}
</style>

Attributes ​

更多属性参考 ElementPlus Col Attributes

属性名类型默认值说明
use-gridbooleantrue是否使用栅格布局
is-fullbooleanfalse是否占满父容器宽度

Slots ​

插槽参考 ElementPlus Col Slots