1.0.2 • Published 5 years ago
gridfy-vue v1.0.2
gridfy-vue
Dynamic Layout with CSS Grid on Vue
Generated using vue-cli-template-library.
Installation
npm install gridfy-vue
#
yarn add gridfy-vue
gridfy-vue can be used as a module in both CommonJS and ES modular environments.
When in non-modular environment, gridfy-vue will register all the components to vue by itself.
ES6
//
// You can register a component manually
//
import { Grid } from 'gridfy-vue';
export default {
...
components: {
Grid
},
...
};
//
// or register the whole module with vue
//
import Gridfy from 'gridfy-vue';
// Install this library
Vue.use(Gridfy);
CommonJS
//
// You can register a component manually
//
var Vue = require('vue');
var Gridfy = require('gridfy-vue');
var YourComponent = Vue.extend({
...
components: {
'grid': Gridfy.Grid
},
...
});
//
// or register the whole module with vue
//
var Vue = require('vue');
var Gridfy = require('gridfy-vue');
// Install this library
Vue.use(Gridfy);
Browser
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/gridfy-vue/dist/gridfy-vue.min.js"></script>
<!-- Components are registered globally -->
After that, you can use it in your templates:
<!-- Static grid -->
<grid column="4">
<div class="example">
Column 1
</div>
<div class="example">
Column 2
</div>
<div class="example">
Column 2
</div>
</grid>
<!-- Dynamic grid -->
<grid dynamic column="3">
<div column="1" row="1" class="example">
Column 1
</div>
<div column="1" row="2" class="example">
Column 1
</div>
<div column="2" row="2" class="example">
Column 2
</div>
<div column="3" row="3" class="example">
Column 2
</div>
</grid>
<!-- Auto grid -->
<grid column="3">
<div :desktop="['1', '1']" :tablet="['2', '1']" class="example">
Column 1
</div>
<div :desktop="['2', '2']" :tablet="['1', '2']" class="example">
Column 2
</div>
<div :desktop="['3', '3']" :tablet="['3', '3']" class="example">
Column 2
</div>
</grid>
<!-- Stacked grid -->
<grid column="3">
<div class="example">
<grid column="2">
<div class="example">
Column 1
</div>
<div class="example">
Column 2
</div>
</grid>
</div>
<div class="example">
Column 2
</div>
<div class="example">
<grid column="2">
<div class="example">
Column 1
</div>
<div class="example">
Column 2
</div>
</grid>
</div>
</grid>
Changelog
See the GitHub release history.
Contributing
See CONTRIBUTING.md.