sets-ui

Appearance

Grid 布局网格 ​

基础用法 ​

默认 grid 布局，使用 col gap wrap 控制列数、间距、换行

网格1
网格2
网格3
网格4
网格1
网格2
网格3
网格4
vue
<template>
  <s-grid :col="4" gap="5px" wrap>
    <s-cell style="background:red;">网格1</s-cell>
    <s-cell style="background:yellow;">网格2</s-cell>
    <s-cell style="background:blue;">网格3</s-cell>
    <s-cell style="background:green;">网格4</s-cell>
    <s-cell style="background:red;">网格1</s-cell>
    <s-cell style="background:yellow;">网格2</s-cell>
    <s-cell style="background:blue;">网格3</s-cell>
    <s-cell style="background:green;">网格4</s-cell>
  </s-grid>
</template>

<style>
  .s-grid {
    background-color: #000;
  }
</style>

更换布局 ​

通过 display 切换布局

网格1
网格2
网格3
网格4
网格1
网格2
网格3
网格4
vue
<template>
  <s-grid display="flex" :col="4" gap="5px">
    <s-cell style="background:red;">网格1</s-cell>
    <s-cell style="background:yellow;">网格2</s-cell>
    <s-cell style="background:blue;">网格3</s-cell>
    <s-cell style="background:green;">网格4</s-cell>
    <s-cell style="background:red;">网格1</s-cell>
    <s-cell style="background:yellow;">网格2</s-cell>
    <s-cell style="background:blue;">网格3</s-cell>
    <s-cell style="background:green;">网格4</s-cell>
  </s-grid>
</template>

<style>
  .s-grid {
    background-color: #000;
  }
</style>

API ​

Grid Attributes ​