Yy Craft

主题

Grid 栅格布局 ​

基本用法 ​

查看示例
vue
<template>
  <yy-grid :cols="2" :gap="16">
    <yy-button>A</yy-button>
    <yy-button>B</yy-button>
  </yy-grid>
</template>

列间距 ​

查看示例
vue
<template>
  <yy-grid :cols="4" :gap="[24, 8]">
    <yy-button>A</yy-button>
    <yy-button>B</yy-button>
    <yy-button>C</yy-button>
    <yy-button>D</yy-button>
  </yy-grid>
</template>

响应式的列 ​

列根据窗口的响应式 ​

json
// 具体的标识代表的窗口尺寸
{
  "xs": 0, // mobile
  "s": 640, // tablet
  "m": 1024, // laptop s
  "l": 1280, // laptop
  "xl": 1536, // laptop l
  "xxl": 1920 // normal desktop display
}
查看示例
vue
<template>
  <yy-grid cols="1 l:3 xl:4 xxl:5" :gap="8">
    <yy-gi>
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi>
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi>
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi>
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi>
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
  </yy-grid>
</template>

列根据元素尺寸的响应式 ​

查看示例
vue
<template>
  <yy-grid
    cols="1 500:3"
    :gap="8"
    style="resize: horizontal; overflow: auto; max-width: 100%"
  >
    <yy-gi style="display: flex">
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi style="display: flex">
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi style="display: flex">
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi style="display: flex">
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
    <yy-gi style="display: flex">
      <yy-button style="width: 100%; padding: 0">
        我们是响应式的
      </yy-button>
    </yy-gi>
  </yy-grid>
</template>

项跨列/行和偏移 ​

查看示例
vue
<template>
  <yy-grid :cols="4" :gap="8">
    <yy-grid-item :span="2">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        2列
      </yy-button>
    </yy-grid-item>
    <yy-grid-item :span="1" :offset="1">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        偏移1列
      </yy-button>
    </yy-grid-item>
    <yy-grid-item :span="1" :row-span="3">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        跨2行
      </yy-button>
    </yy-grid-item>
    <yy-grid-item :span="1" :offset="1">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        填充物
      </yy-button>
    </yy-grid-item>
    <yy-grid-item :span="1" :offset="1">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        填充物
      </yy-button>
    </yy-grid-item>
  </yy-grid>
</template>

响应式的栅格项 ​

栅格项根据窗口的响应式 ​

查看示例
vue
<template>
  <yy-grid :cols="4" :gap="8">
    <yy-grid-item span="1 l:2 xl:3 xxl:4">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        我是响应式的项
      </yy-button>
    </yy-grid-item>
  </yy-grid>
</template>

栅格项根据元素尺寸的响应式 ​

查看示例
vue
<template>
  <yy-grid :cols="4" :gap="8">
    <yy-grid-item span="1 150:2">
      <yy-button style="width: 100%; height: 100%; padding: 0">
        我是响应式的项
      </yy-button>
    </yy-grid-item>
  </yy-grid>
</template>

Props ​

Grid ​

参数说明类型默认值
cols列数number | string12
gap间距number | [number, number]0

GridItem ​

参数说明类型默认值
span占据的列数number | string1
offset距离左侧的间隔数number0
rowSpan占据的行数number1