@lagabu/grid v1.0.0-alpha.0

Grid

Grids components provide flexable layout to display infomation.

Single Package Usage

You can use components of this package alone.

1. Install

yarn add @lagabu/grid -D

# or

npm install @lagabu/grid --save-dev

2. Use plugin

import { createApp } from 'vue';
import { GridPlugin } from '@lagabu/grid';
import '@lagabu/theme-default/dist/all.min.css';

createApp()
  .use(GridPlugin, {
    prefix: 'ako-', // custom component prefix
    grid: {
      columns: 12, // custom columns number
      gutters: {
        // custom gutter object
        xs: '2px',
        sm: '4px',
      },
    },
  })
  .mount('#app');

Grid Service

Grid service can set global columns and gutters style options.

GridOptions:

const enum FlexEnum {
  xs = 'xs',
  sm = 'sm',
  md = 'md',
  lg = 'lg',
  xl = 'xl',
}

type GridOptions = {
  columns?: string | number;
  gutters?: { [prop: string]: string | number } & {
    [T in FlexEnum]?: string | number;
  };
};

Container

<container> component is a simple container

Props

Row

<row> is a simple flexable row component

Props

Col

<col> component is a column item container.

Props

Divider

<divider> component is a line-style element.

Props