小鹅通组件

# grid栅格布局

# 初始化

单独引用时：从入口的js文件引入

import { SsCol } from '@xiaoe/sense'
import { SsRol } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(SsCol)
Vue.use(SsRow)
1
2
3
4
5

# 基本布局

<ss-row>
    <ss-col :span="8"><div></div></ss-col>
    <ss-col :span="8"><div></div></ss-col>
    <ss-col :span="8"><div></div></ss-col>
</ss-row>
1
2
3
4
5

# 分栏布局

<ss-row :gutter="20">
    <ss-col :span="8"><div></div></ss-col>
    <ss-col :span="8"><div></div></ss-col>
    <ss-col :span="8"><div></div></ss-col>
</ss-row>
1
2
3
4
5

# 混合布局

<ss-row :gutter="20">
    <ss-col :span="16"><div></div></ss-col>
    <ss-col :span="8"><div></div></ss-col>
</ss-row>
1
2
3
4

# 分栏偏移

<ss-row :gutter="20">
  <ss-col :span="6"><div class="grid-content bg-purple"></div></ss-col>
  <ss-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></ss-col>
</ss-row>
1
2
3
4

# 响应式布局

<ss-row :gutter="10">
   <ss-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></ss-col>
   <ss-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></ss-col>
   <ss-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></ss-col>
   <ss-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></ss-col>
 </ss-row>
1
2
3
4
5
6
参数 说明 类型 默认值 可选值
gutter 栅栏间隔 number 0 —
offest 栅格左侧间隔数 number 0 —
xs <768px number — —
sm >=768px number — —
md >=992px number — —
lg >=1200px number — —
xl >=1920px number — —

← 下载中心相关业务组件 →