ph-grid-layout

vue-template

install

npm install ph-grid-layout

javascript

import { PhGrid, PhGridItem } from 'ph-grid-layout'

template

<ph-grid :shadow="true" :border="true">
    <ph-grid-item style="height:200px" class="ph-primary">
    <img src="../assets/logo.png" alt="">
    </ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-danger">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-info">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-danger">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-primary">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-success">你好</ph-grid-item>
    <ph-grid-item style="height:200px" class="ph-warning">你好</ph-grid-item>
</ph-grid>

interface indtoduction

interface PhGrid{
    colGap:String,//列间距15px
    rowGap:String,//行间距15px
    radius:String,//item 圆角 4px
    padding:String,//item padding
    border:Boolean,//item border 启用 ，false
    shadow:Boolean,//item hover 阴影启用 false

    //不同分辨率下 的列数 
    all:Number,//所有分辨率 自适应 优先级高于其他
    xs:Number,//480->1
    sm:Number,//768->2
    md:Number,//992->3
    lg:Number,//1200->4
    xl:Number,//1920->6
}
interface PhGridItem{
    place:String // -> 参考css ：place-self 属性,
    colSpan:Number,//跨行
    rowSpan:Number //跨列
    colOffset:Number,//列偏移
    rowOffset:Number //行偏移
}

案例doc