ivyDesign

Appearance

Grid 宫格布局 ​

基础用法 ​

常规用法

12121212121212
html
<ivy-grid class="grid-row">
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item
    span="12"
    class="grid-item"
    style="background-color: #67C23A;height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item
    span="12"
    class="grid-item"
    style="background-color: #67C23A;height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item
    span="12"
    class="grid-item"
    style="background-color: #67C23A;height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
</ivy-grid>

边框 ​

通过border设置 grid 组件的边框

12121212121212
html
<ivy-grid class="grid-row" border>
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
  <ivy-grid-item span="12" class="grid-item" style="height: 100px"
    >12</ivy-grid-item
  >
</ivy-grid>

宽高一致 ​

通过 square 设置宽高一样

12121212121212
html
<ivy-grid class="grid-row" border square>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
  <ivy-grid-item span="12" class="grid-item">12</ivy-grid-item>
</ivy-grid>

可用的 CSS 变量 ​

点击打开
css
:host {
  --ivy-grid-border-color: var(--ivy-border-color, #dcdfe6);
}

Props ​

属性名说明可选值默认值
mode布局模式grid/flexgrid
square是否宽高等比--
border是否显示边框--
cols列数-3