vue-block

A Vue plugin helping you build CSS grid like layout system with the support of old browser like IE9.

Feature

vue-block can provide you:

• CSS grid like layout system.
• Really easy to use API, especially for new Vue beginner.
• Support IE9+ and other modern browser which support CSS calc.
• Functional component, which is stateless and instanceless.

Install

Install with npm:

npm install --save-dev vue-block

Usage

Basicly vue-block is a Vue plugin. Also you can use it as a Vue component.

Plugin Usage:

import 'vue-block/dist/block.css';
import block from 'vue-block';
import Vue from 'vue';
Vue.use(block);
 
new Vue({
    el: '#app',
    template: `<block>
        <div slot="left"><div>
        <div slot="right"><div>
    </block>`
});

Component Usage:

import 'vue-block/dist/block.css';
import block from 'vue-block';
import Vue from 'vue';
 
new Vue({
    el: '#app',
    template: `<block>
        <div slot="left"><div>
        <div slot="right"><div>
    </block>`,
    components: { block }
});

API

vue-block's API is provide by all kinds of vue slot. It provide some default slot to handle the basic layout function.

For Example:

<!-- left and right -->
<block>
    <div slot="left">left<div>
    <div slot="right">right<div>
</block>
 
<!-- horizontal center -->
<block>
    <div slot="center">center 1<div>
    <div slot="center">center 2<div>
</block>
 
<!-- middle of the block, both vertical and horizontal -->
<block>
    <div slot="middle">middle 1<div>
    <div slot="middle">middle 2<div>
</block>

And most excited thing is vue-block support css grid like layout system.

For Example:

<block
    cols="100px 2fr 1fr"
    rows="100px 200px 100px"
    pattern="header header right, side main right, side main right">
    <div slot="header"></div>
    <div slot="side"></div>
    <div slot="main"></div>
    <div slot="right"></div>
</block>

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build
 
# build for doc
npm run doc