SuperUiPlus基础组件文档

主题

Layout 布局 ​

示例 ​

基本使用 ​

<template>
  <div>
    <SuperGrid>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
    </SuperGrid>
  </div>
</template>

<style lang="scss" scoped>
.demo-item-content {
  padding: 20px;
  background: #d3dce6;
  border-radius: 8px;
}
</style>

分栏间隔 ​

分栏之间存在间隔。

<template>
  <div>
    <SuperGrid :gap="10">
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
    </SuperGrid>
  </div>
</template>

<style lang="scss" scoped>
.demo-item-content {
  padding: 20px;
  background: #d3dce6;
  border-radius: 8px;
}
</style>

混合布局 ​

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

<template>
  <div>
    <SuperGrid :gap="[10, 20]">
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="2">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="3">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="4">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem>
        <div class="demo-item-content"></div>
      </SuperGridItem>
    </SuperGrid>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const header = ref()
onMounted(() => {
  console.log(header.value)
})
</script>

<style lang="scss" scoped>
.demo-item-content {
  padding: 20px;
  background: #d3dce6;
  border-radius: 8px;
}
</style>

分栏偏移 ​

支持偏移指定的栏数。(需要配合当前处于什么大小参数使用，如 :lg="{ span: 2, offset: 2 }")

<template>
  <div>
    <SuperGrid :gap="[10, 20]">
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1" :lg="{ offset: 1 }">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1" :lg="{ offset: 1 }">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1" :lg="{ span: 2, offset: 2 }">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1">
        <div class="demo-item-content"></div>
      </SuperGridItem>
      <SuperGridItem :span="1" :lg="{ offset: 1 }">
        <div class="demo-item-content"></div>
      </SuperGridItem>
    </SuperGrid>
  </div>
</template>

<style lang="scss" scoped>
.demo-item-content {
  padding: 20px;
  background: #d3dce6;
  border-radius: 8px;
}
</style>

API ​

Grid Props ​

参数说明类型可选值默认值
cols响应式布局参数number/object-{ xs: 1, sm: 2, md: 3, lg: 4, xl: 4 }
gap栅格间隔[number, number]/number-0

GridItem Props ​

参数说明类型可选值默认值
offset栅格左侧的间隔格数number-0
span栅格占据的列数number-1
suffix是否预留尾部(展开/收起)按钮位置booleantrue/falsefalse