vue网格布局组件

威格 ( vue-grd )

Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd.

简单，轻巧和灵活的Vue.js组件，用于网格布局。 Vue.js grd的端口。

View demo View Github 查看Github

安装 ( Install )

npm install --save vue-grd

用法 ( Usage )

You can use <vue-grid> and <vue-cell> components after importing and registering VueGrid and VueCell .

导入和注册 VueGrid 和 VueCell 之后，可以使用 <vue-grid> 和 <vue-cell> 组件。

<template>
  <vue-grid align="stretch" justify="start">
    <vue-cell width="fill">fill</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
    <vue-cell width="3of12">3of12</vue-cell>
  </vue-grid>
</template>
<script>
import { VueGrid, VueCell } from 'vue-grd';
export default {
  components: {
    VueGrid,
    VueCell
</script>

You can also register them as global components.

您也可以将它们注册为全局组件。

import Vue from 'vue';
import { VueGrid, VueCell } from 'vue-grd';
Vue.component('vue-grid', VueGrid);
Vue.component('vue-cell', VueCell);

<vue-grid> 修饰符 ( <vue-grid> modifiers )

tag	description
HTMLElement name	Specify grid's tag name

tag	描述
HTMLElement名称	指定网格的标签名称

align	description
top	Pull items to top
middle	Pull items to middle
bottom	Pull items to bottom
stretch	Stretch items
baseline	Pull items to baseline

align	描述
top	将项目拉到顶部
middle	将物品拉到中间
bottom	将物品拉到底
stretch	伸展项目
baseline	将项目拉至基线

justify	description
start	Layout items to start
center	Layout items to center
end	Layout items to end
between	Add spaces between items
around	Add spaces around items

justify	描述
start	布局项目开始
center	布局项居中
end	布局项目结束
between	在项目之间添加空格
around	在项目周围添加空格

<vue-cell> 修饰符 ( <vue-cell> modifiers )

tag	description
HTMLElement name	Specify cell's tag name

tag	描述
HTMLElement名称	指定单元格的标签名称

width	description
fill	Set item width to left
1of12	Set item width to 8.3%
2of12	Set item width to 16.7%
3of12	Set item width to 25%
4of12	Set item width to 33%
5of12	Set item width to 41.7%
6of12	Set item width to 50%
7of12	Set item width to 58.3%
8of12	Set item width to 66.7%
9of12	Set item width to 75%
10of12	Set item width to 83.3%
11of12	Set item width to 91.7%
12of12	Set item width to 100%

width	描述
fill	将项目宽度设置为左
1of12	将项目宽度设置为8.3％
2of12	将项目宽度设置为16.7％
3of12	将项目宽度设置为25％
4of12	将项目宽度设置为33％
5of12	将项目宽度设置为41.7％
6of12	将项目宽度设置为50％
7of12	将项目宽度设置为58.3％
8of12	将项目宽度设置为66.7％
9of12	将项目宽度设置为75％
10of12	将项目宽度设置为83.3％
11of12	将项目宽度设置为91.7％
12of12	将项目宽度设置为100％

翻译自: https://vuejsexamples.com/simple-and-flexible-vue-js-component-for-grid-layout/

vue网格布局组件

vue网格布局组件 威格 (vue-grd)Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. 简单，轻巧和灵活的Vue.js组件，用于网格布局。 Vue.js grd的端口。 View demo查看演示 View Github 查看Github 安装 (Inst...