Skip to content
This repository has been archived by the owner on Oct 3, 2020. It is now read-only.

SeregPie/VueFlex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VueFlex

A flexbox grid system.

demo

Try it out!

setup

npm

npm install @seregpie/vueflex

Register the components globally.

import Vue from 'vue';
import VueFlex from '@seregpie/vueflex';

Vue.use(VueFlex);

or

Register the components in the scope of another component.

import VueFlex from '@seregpie/vueflex';

export default {
  components: {
    [VueFlex.Box.name]: VueFlex.Box,
    [VueFlex.Item.name]: VueFlex.Item,
  },
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vueflex"></script>

If Vue is detected, the components are registered automatically.

usage

<vue-flex-box
  align-items="center"
  gap="16px"
  justify-content="space-between"
  wrap
>
  <vue-flex-item><!--...--></vue-flex-item>
  <vue-flex-item><!--...--></vue-flex-item>
</vue-flex-box>

Nested boxes can inherit the gap from their parent.

<vue-flex-box gap="8px">
  <vue-flex-item
    style="width: 100px;"
  ><!--...--></vue-flex-item>
  <vue-flex-box
    direction-column
    gap="inherit"
    style="flex-grow: 1;"
  >
    <vue-flex-item><!--...--></vue-flex-item>
    <vue-flex-item><!--...--></vue-flex-item>
  </vue-flex-box>
</vue-flex-box>

Provide any unit for the gap.

<vue-flex-box gap="2em"><!--...--></vue-flex-box>

components

VueFlexBox

properties

property type default
alignContent String 'stretch'
alignItems String 'stretch'
directionColumn Boolean false
gap String '0px'
justifyContent String 'flex-start'
reverseDirection Boolean false
reverseWrap Boolean false
tag String 'div'
wrap Boolean false

VueFlexItem

properties

property type default
tag String 'div'