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:
;;;Vue; el: '#app' template: `<block> <div slot="left"><div> <div slot="right"><div> </block>`;
Component Usage:
;;; 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 --> left right <!-- horizontal center --> center 1 center 2 <!-- middle of the block, both vertical and horizontal --> middle 1 middle 2
And most excited thing is vue-block
support css grid like layout system.
For Example:
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for docnpm run doc