Win Design

Layout 布局

参考bootstrap提供了栅格布局, 并根据设计规则封装了基础布局组件, 协助开发者快速完成页面布局。

通过基础的 24 分栏，迅速简便地创建布局。

代码演示

基础布局

使用单一分栏创建基础的栅格布局。

查看代码 < />

<template>
  <w-row>
    <w-col :span="24">
      <div class="grid-content bg-purple-dark"></div></w-col>
  </w-row>
  <w-row>
    <w-col :span="12">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="12">
      <div class="grid-content bg-purple-light"></div></w-col>
  </w-row>
  <w-row>
    <w-col :span="8">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="8">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="8">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
  </w-row>
  <w-row>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple-light"></div></w-col>
  </w-row>
</template>

分栏间隔

分栏之间存在间隔, 可以使用gutter来设置。

查看代码 < />

<template>
  <w-row :gutter="20">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
</template>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

查看代码 < />

<template>
  <w-row :gutter="20">
    <w-col :span="16">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="8">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row :gutter="20">
    <w-col :span="8">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="8">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row :gutter="20">
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="16">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="4">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
</template>

分栏偏移

支持偏移指定的栏数, 可以通过offset属性来设置。

查看代码 < />

<template>
  <w-row :gutter="20">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div>
    </w-col>
    <w-col :span="6" :offset="6">
      <div class="grid-content bg-purple"></div>
    </w-col>
  </w-row>
  <w-row :gutter="20">
    <w-col :span="6" :offset="6">
      <div class="grid-content bg-purple"></div>
    </w-col>
    <w-col :span="6" :offset="6">
      <div class="grid-content bg-purple"></div>
    </w-col>
  </w-row>
  <w-row :gutter="20">
    <w-col :span="12" :offset="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
</template>

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

查看代码 < />

<template>
  <w-row type="flex" class="row-bg">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row type="flex" class="row-bg" justify="center">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row type="flex" class="row-bg" justify="end">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row type="flex" class="row-bg" justify="space-between">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
  <w-row type="flex" class="row-bg" justify="space-around">
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple-light"></div></w-col>
    <w-col :span="6">
      <div class="grid-content bg-purple"></div></w-col>
  </w-row>
</template>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

查看代码 < />

<template>
  <w-row :gutter="10">
    <w-col :xs="8" :sm="6" :md="4" :lg="3"
      :xl="1"><div class="grid-content bg-purple"></div></w-col>
    <w-col :xs="4" :sm="6" :md="8" :lg="9"
      :xl="11"><div class="grid-content bg-purple-light"></div></w-col>
    <w-col :xs="4" :sm="6" :md="8" :lg="9"
      :xl="11"><div class="grid-content bg-purple"></div></w-col>
    <w-col :xs="8" :sm="6" :md="4" :lg="3"
      :xl="1"><div class="grid-content bg-purple-light"></div></w-col>
  </w-row>
</template>

API

Row Attributes

参数 说明 类型 可选值 默认值 Version
align flex 布局下的垂直排列方式 String top/middle/bottom top
gutter 栅格间隔 Number — 0
justify flex 布局下的水平排列方式 String start/end/center/space-around/space-between start
type 布局模式，可选 flex，现代浏览器下有效 String — —
tag 自定义元素标签 String — div

Col Attributes

参数 说明 类型 可选值 默认值 Version
lg ≥1200px 响应式栅格数或者栅格属性对象 Number/Object (例如： {span: 4, offset: 4}) — —
md ≥992px 响应式栅格数或者栅格属性对象 Number/Object (例如： {span: 4, offset: 4}) — —
offset 栅格左侧的间隔格数 Number — 0
push 栅格向右移动格数 Number — 0
pull 栅格向左移动格数 Number — 0
sm ≥768px 响应式栅格数或者栅格属性对象 Number/Object (例如： {span: 4, offset: 4}) — —
span 栅格占据的列数 Number — 24
tag 自定义元素标签 String * div
xs <768px 响应式栅格数或者栅格属性对象 Number/Object (例如： {span: 4, offset: 4}) — —
xl ≥1920px 响应式栅格数或者栅格属性对象 Number/Object (例如： {span: 4, offset: 4}) — —

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 9/10/2019, 11:45:25 AM

← Affix 固钉 →