@flipit/layout NPM

@flipit/layout

This is a layout component library for Vue, and it's base on Bootstrap 4. Let's check the agenda to help us to know it more.

What is provided

Directives
- FlipitCaptureStyle - Could capture the specific CSS configure.
- FlipitScrolltop - Could specify the Element's scroll-top.
- FlipitPerfectbar - Change the scrollbar style.
Components
- Bootstrap Grid

Install & Import

npm i @flipit/layout -s

@flipit/layout will install its dependencies, and you don't need to install them by yourself. As follows:

Let's try to import @flipit/layout, and register them in your component:

import {
  FlipitCaptureStyle,
  FlipitScrolltop,
  FlipitPerfectbar,

  FlipitContainer,
  FlipitRow,
  FlipitCol
} from '@flipit/layout';

@Component({
  directives: {
    FlipitCaptureStyle,
    FlipitScrolltop,
    FlipitPerfectbar
  },
  components: {
    FlipitContainer,
    FlipitRow,
    FlipitCol
  }
})
export default class MyComponent extends Vue {}

Extended Goals

There are so many layout in Bootstrap 4, such as:

Card
Carousel
Collapse
List
Media object
Modal
Navs & Navbar
Scrollspy
Toasts

All of them are my extended goals. To be continued, hope you could see it as soon.

API Documentation

Directives
- FlipitCaptureStyle
  - Options: { name, styles, callbackFn }
    - name: string | string[] Input the CSS property names which you wanna capture.
    - styles: { [prop: string]: string; } Input the current CSS Properties, and this setting could make directive check the CSS has changed.
    - callbackFn: (captureResult: { [prop: string]: string; }) => void When directive has captured CSS Properties done, this function will be triggered. You could get the capture result via this function.
- FlipitScrolltop
  - Options: number Specify the scroll-top number(px) to the binding Element.
- FlipitPerfectbar
  - Options: { width, height, perfectScrollbar }
    - width: string It means max-width, and this setting would help us to build a X-scrollbar.
    - height: string It means max-height, and this setting would help us to build a Y-scrollbar.
    - perfectScrollbar: PerfectScrollbar If you wanna get the PerfectScrollbar, the directive will override this variable.
Components
- FlipitContainer
  - Props
    - cls: string Input your own classes as you need. (Default is false)
    - margin / mSm / mMd / mLg / mXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5);          // margin-top
  b?: [BsFrame5](#bsframe5);          // margin-bottom
  y?: [BsFrame5](#bsframe5);          // margin-top & margin-bottom
  l?: 'auto' | [BsFrame5](#bsframe5); // margin-left
  r?: 'auto' | [BsFrame5](#bsframe5); // margin-right
  x?: 'auto' | [BsFrame5](#bsframe5); // margin-left & margin-right
}
```
    Set the margin classes of Bootstrap 4. margin is default setting, mSm is suitable when small, mMd is middle, mLg is large, and mXl is extra large. (Default is false)
    - padding / pSm / pMd / pLg / pXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5); // padding-top
  b?: [BsFrame5](#bsframe5); // padding-bottom
  y?: [BsFrame5](#bsframe5); // padding-top & padding-bottom
  l?: [BsFrame5](#bsframe5); // padding-left
  r?: [BsFrame5](#bsframe5); // padding-right
  x?: [BsFrame5](#bsframe5); // padding-left & padding-right
}
```
    Set the padding classes of Bootstrap 4. padding is default setting, pSm is suitable when small, pMd is middle, pLg is large, and pXl is extra large. (Default is false)
    - border: BsBorder Specify the element has border or not. (Default is false)
    - rounded: BsRounded Specify the border-radius style in the element. (Default is false)
    - colors: { border?:BsColor, bg?:BsColor, text?:BsColor} To color the element. (Default is false)
    - hidden: false |BsHidden|BsHidden[] Set the breakpoint which the element would be hidden. (Default is false)
- FlipitRow
  - Props
    - align: BsJustifyContent Set horizontal alignment of the element. (Default is false)
    - alignable: BsSize Set the horizontal alignment breakpoint. (Default is '', means all sizes are suitable)
    - gutters: boolean Set the element has gutter or not, and it's defined in Bootstrap - Grid No Gutters. (Default is true)
    - cls: string Input your own classes as you need.
    - margin / mSm / mMd / mLg / mXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5);          // margin-top
  b?: [BsFrame5](#bsframe5);          // margin-bottom
  y?: [BsFrame5](#bsframe5);          // margin-top & margin-bottom
  l?: 'auto' | [BsFrame5](#bsframe5); // margin-left
  r?: 'auto' | [BsFrame5](#bsframe5); // margin-right
  x?: 'auto' | [BsFrame5](#bsframe5); // margin-left & margin-right
}
```
    Set the margin classes of Bootstrap 4. margin is default setting, mSm is suitable when small, mMd is middle, mLg is large, and mXl is extra large.
    - padding / pSm / pMd / pLg / pXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5); // padding-top
  b?: [BsFrame5](#bsframe5); // padding-bottom
  y?: [BsFrame5](#bsframe5); // padding-top & padding-bottom
  l?: [BsFrame5](#bsframe5); // padding-left
  r?: [BsFrame5](#bsframe5); // padding-right
  x?: [BsFrame5](#bsframe5); // padding-left & padding-right
}
```
    Set the padding classes of Bootstrap 4. padding is default setting, pSm is suitable when small, pMd is middle, pLg is large, and pXl is extra large.
    - border: BsBorder Specify the element has border or not.
    - rounded: BsRounded Specify the border-radius style in the element.
    - colors: { border?:BsColor, bg?:BsColor, text?:BsColor} To color the element.
    - hidden: false |BsHidden|BsHidden[] Set the breakpoint which the element would be hidden.
- FlipitCol
  - Props
    - def: BsColumnWidth|BsColumnProps To set the default column layout configures. (Default is 'auto')
    - sm / md / lg / xl: false |BsColumnWidth|BsColumnProps To set the breakpoint column layout configures. sm is suitable when small, md is middle, lg is large, and xl is extra large. (Default is false)
    - align: 'left' | 'center' | 'right' Set the column content horizontal alignment.
    - cls: string Input your own classes as you need.
    - margin / mSm / mMd / mLg / mXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5);          // margin-top
  b?: [BsFrame5](#bsframe5);          // margin-bottom
  y?: [BsFrame5](#bsframe5);          // margin-top & margin-bottom
  l?: 'auto' | [BsFrame5](#bsframe5); // margin-left
  r?: 'auto' | [BsFrame5](#bsframe5); // margin-right
  x?: 'auto' | [BsFrame5](#bsframe5); // margin-left & margin-right
}
```
    Set the margin classes of Bootstrap 4. margin is default setting, mSm is suitable when small, mMd is middle, mLg is large, and mXl is extra large.
    - padding / pSm / pMd / pLg / pXl: false |BsFrame5| {
```
  t?: [BsFrame5](#bsframe5); // padding-top
  b?: [BsFrame5](#bsframe5); // padding-bottom
  y?: [BsFrame5](#bsframe5); // padding-top & padding-bottom
  l?: [BsFrame5](#bsframe5); // padding-left
  r?: [BsFrame5](#bsframe5); // padding-right
  x?: [BsFrame5](#bsframe5); // padding-left & padding-right
}
```
    Set the padding classes of Bootstrap 4. padding is default setting, pSm is suitable when small, pMd is middle, pLg is large, and pXl is extra large.
    - border: BsBorder Specify the element has border or not.
    - rounded: BsRounded Specify the border-radius style in the element.
    - colors: { border?:BsColor, bg?:BsColor, text?:BsColor} To color the element.
    - hidden: false |BsHidden|BsHidden[] Set the breakpoint which the element would be hidden.
Bootstrap Options
- BsFrame5: 1 | 2 | 3 | 4 | 5 According to Bootstrap - Spacing, margin and padding must be set between 1 and 5.
- BsBorder: boolean | { t?: true; b?: true; l?: true; r?: true; } Set true means need border, and you could just setting the specify side.
- BsRounded: boolean | {
```
  size?: 'sm' | 'lg';
  type?: 'top' | 'bottom' | 'left' | 'right' | 'circle' | 'pill';
}
```
Set true means need border-radius, and you could also specify the type which is provided by Bootstrap - Border Radius.
- BsColor: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'white'; The colors is provided by Bootstrap - Colors.
- BsHidden: 'def' | 'sm' | 'md' | 'lg' | 'xl' These sizes are breakpoints which were defined for hidden setting.
- BsJustifyContent: false | 'start' | 'center' | 'end' | 'around' | 'between' Here are the all allowed options which are defined in Bootstrap - Horizontal Alignment.
- BsSize: '' | 'sm' | 'md' | 'lg' | 'xl' Here are the all sizes which are defined in Bootstrap - Grid Options.
- BsColumnWidth: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 The option is used to defined column's width. In Bootstrap - Grid Setting One Column Width, the allowed value is between 1 and 12, or use 'auto' to set as Bootstrap - Grid Equal Width.
- BsColumnProps: { width, offset, order }
  - width: BsColumnWidth This is a required option, to set the column width.
  - offset: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Define this option to offset column, and you could see Bootstrap Grid Offsetting Columns.
  - order: 'first' | 'last' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Reorder the columns in the row, and you could see Bootstrap Grid Reordering.