q-layout

CHANGELOG

中文文档

Download

yarn

yarn add q-layout

npm

npm install q-layout

cnpm

cpm install q-layout

Import

import q-layout in the entry file

import Vue from 'vue';
import QLayout from 'q-layout';
import 'q-layout/dist/q-layout.css';
Vue.use(QLayout);

And then you can use the layout component which call q-row anywhere

<q-row>template</q-row>

Why q-layout exists

In the usual development, we build the layout of a webpage by html css or a littile bit javascript, javascript will only be using more in some logics of codes but not the layout

During coding the layout of a webpage, we will code html first and name a className for an element, just like <div class="test"></div>, or naming it by an id, but whatever you should define a sign for an element.

And there is a rule in naming the className for elements which call bem, but if you are using vue, it will be not necessary because vue has a scoped css concept

But you can check that some vue ui components also use the bem naming rule, because it will be much more standard. But actually in the business code,it would be not much standard,the naming in the ui components is for the user who will change the style of the component conventionally,but it is not much more sense to use it in the business code

This is the first problem, Don't you find there is troublesome to name an element in business codes ? If you naming it easy you'd find it is not suitable,if naming it complexly you'd find it is trouble

But the proble can be resolved,we check it later

After you define a sign for an element, you need to code css for it, code css in vue is easy too.

just like this

<style scoped>
.test {
  color: blue;
}
</style>

But when the page's business is complex, there will be a a lot of elements and a lot of classeNames

Usualy we checked the layout of the page will not direct check the code, we will check it by using chrome's tool, and then if we may change the style we should find the sign of the element first and then can change css of the element

It will be not necessary, Image that, if you code css in html, Won't you cut down a step to change css

for example

There is an element which height is 100px

The usual way to code it is like this

<template>
  <div class="element">test</div>
</template>

<script>
export default {};
</script>

<style scoped>
.element {
  height: 100px;
}
</style>

We take full advantage of vue's feature, you can write css by using props

<template>
  <q-row h="100">test</q-row>
</template>

<script>
export default {};
</script>

It will be translated the same as the usual way

<div style="height:100.000px">test</div>

No Style and no Classnames, you don't need to cudgele your brains to think the naming of the className, and you don't need to find the position to change css,you will only need to find the element

And we provide many props to code the layout not only h

Props

We separate css properties by w3c standard classification

Options Explanation

The following documentation just like this

| props | Type | Raw | Default | TranslateType | | ------- | :----: | :-------------: | :-----: | ------------: | | bkColor | String | backgroundColor | '' | pure |

before we check the documentation for props we need know some explanations

props

the same as vue props

type

the same as vue prop's type

raw

the original css property

default

the same as vue prop's default value

translateType

different properties have different translatable result

• default

to translate property by using the settings's unit and ratio

The default unit is px and the default ratio is 1

you can change that by the config.

for example

<q-row maxh="100">test</q-row>

the result is

<div style="maxHeight:100.000px">test</div>

• pure

To direct translating property

for example

<q-row color="#000">test</q-row>

the result is

<div style="color:#000">test</div>

• class

Translate property by setting classNames not styles

for example

<q-row dir="top">test</q-row>

the result is

<div class="q-layout-flexDirection-top">test</div>

and we have built-in class

.q-layout-flexDirection-top {
  flex-direction: column;
}

• classPure

If property is a boolean will enable class if not will enable pure

for example

if property is a boolean

<q-row border></q-row>

The above generative result will be <div class="q-layout-border"></div>

if property is a string

<q-row border="1px solid #666"></q-row>

The above generative result will be border:1px solid #666 and will not set a className

The following are built-in props

Background

| props | Type | Raw | Default | TranslateType | | ---------- | :----: | :----------------: | :-----: | ------------: | | background | String | background | '' | pure | | bkColor | String | backgroundColor | '' | pure | | bkPosition | String | backgroundPosition | '' | pure | | bkRepeat | String | backgroundRepeat | '' | pure | | bkSize | String | backgroundSize | '' | pure |

Border

| props | Type | Raw | Default | TranslateType | | ------------ | :------------: | :----------: | :-----: | ------------: | | borderTop | String Boolean | borderTop | '' | classPure | | borderRight | String Boolean | borderRight | '' | classPure | | borderBottom | String Boolean | borderBottom | '' | classPure | | borderLeft | String Boolean | borderLeft | '' | classPure | | border | String Boolean | border | '' | classPure | | radius | Number String | borderRadius | '' | default |

Box

| props | Type | Raw | Default | TranslateType | | --------- | :----: | :-------: | :-----: | ------------: | | overflow | String | overflow | '' | pure | | overflowX | String | overflowX | '' | pure | | overflowY | String | overflowY | '' | pure |

Color

| props | Type | Raw | Default | TranslateType | | ------- | :-----------: | :-----: | :-----: | ------------: | | opacity | String Number | opacity | '' | pure |

Dimension

| props | Type | Raw | Default | TranslateType | | ----- | :-----------: | :-------: | :-----: | ------------: | | h | String Number | height | '' | default | | maxh | String Number | maxHeight | '' | default | | minh | String Number | minHeight | '' | default | | w | String Number | width | '' | default | | maxw | String Number | maxWidth | '' | default | | minw | String Number | minWidth | '' | default |

Flex

| props | Type | Raw | Default | TranslateType | Description | | ------- | :-----: | :------------: | :-----: | :-----------: | ----------------------------------------------------: | | dir | String | flexDirection | '' | class | top right bottom left | | justify | String | justifyContent | '' | class | flex-start flex-end center space-between space-around | | align | String | alignItems | '' | class | flex-start flex-end center baseline stretch | | flex | String | flex | '' | class | 1-10 | | center | Boolean | '' | '' | class | justify=center & align=center |

FontSize

| props | Type | Raw | Default | TranslateType | | ---------- | :----: | :--------: | :-----: | ------------: | | fontSize | String | fontSize | '' | default | | fontWeight | String | fontWeight | '' | pure |

Margin

| props | Type | Raw | Default | TranslateType | | ------ | :-----------: | :----------: | :-----: | ------------: | | margin | String Number | margin | '' | default | | mt | String Number | marginTop | '' | default | | mr | String Number | marginRight | '' | default | | mb | String Number | marginBottom | '' | default | | ml | String Number | marginLeft | '' | default |

Padding

| props | Type | Raw | Default | TranslateType | | ------- | :-----------: | :-----------: | :-----: | ------------: | | padding | String Number | padding | '' | default | | pt | String Number | paddingTop | '' | default | | pr | String Number | paddingRight | '' | default | | pb | String Number | paddingBottom | '' | default | | pl | String Number | paddingLeft | '' | default |

Position

| props | Type | Raw | Default | TranslateType | | ---------- | :-----------: | :-----------: | :-----: | ------------: | | position | String | position | '' | pure | | t | String Number | top | '' | default | | r | String Number | right | '' | default | | b | String Number | bottom | '' | default | | l | String Number | left | '' | default | | display | String | display | '' | pure | | float | String | float | '' | pure | | cursor | String | cursor | '' | pure | | va | String | verticalAlign | '' | pure | | zIndex | String | zIndex | '' | pure | | visibility | String | visibility | '' | pure |

Text

| props | Type | Raw | Default | TranslateType | | ------------- | :----: | :-----------: | :-----: | ------------: | | color | String | color | '' | pure | | lh | String | lineHeight | '' | default | | indent | String | textIndent | '' | default | | letterSpacing | String | letterSpacing | '' | default | | wordSpacing | String | wordSpacing | '' | default | | textAlign | String | textAlign | '' | pure | | whiteSpace | String | whiteSpace | '' | pure | | wordBreak | String | wordBreak | '' | pure |

User

| props | Type | Raw | Default | TranslateType | | ----- | :----: | :-------: | :-----: | ------------: | | box | String | boxSizing | '' | pure |

InstallOptions

| Options | Type | Required | Default | Description | | ----------- | :----: | :------: | :-----: | ----------------------: | | unit | String | false | px | css unit | | ratio | String | false | 1 | css ratio | | decimals | String | false | 3 | reserved decimal places | | collections | Object | false | {} | custom css property |

• unit

css unit which can be px rem vw or more, default value is px

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  unit: 'vw'
});

<q-row h="100"></q-row>

The above generative result will be

<div style="height:100.000vw"></div>

• ratio

The ratio between the practical value and the setting value, default value is 1

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  unit: 'vw',
  ratio: 7.5
});

<q-row h="100"></q-row>

The above generative result will be

<div style="height:13.333vw"></div>

because 100/7.5 = 13.333

• decimals

The computing value's reserved decimal, default value is 3

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  unit: 'vw',
  ratio: 7.5,
  decimals: 2
});

<q-row h="100"></q-row>

The above generative result will be

<div style="height:13.33vw"></div>

• collections

We provide many props that can satisfy many demands, but if you want to add some custom css property or change default css property you can use collections

collections has some configurations

Keep Original Property

The following configurations can change property based on the original property

alias

you can set an alias name for a property which is existing

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    h: {
      alias: 'height'
    }
  }
});

<q-row height="100"></q-row>

so h and height can both translate to

<div style="height:100.000px"></div>

coverage

if you don't need the original property you can use this to coverage the old property

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    h: {
      coverage: 'height'
    }
  }
});

<q-row height="100"></q-row>

now only height can be translated, the property h has been removed

<div style="height:100.000px"></div>

New Property

If you need to configurate some custom properties you can use following configurations raw type default pure class classPure

raw

The original css property, which is required

type

The property's type

The same as the prop's type in vue, which is required

default

The property's default value

The same as the prop's default value in vue, which is required

raw&type&default

The same as default of translateType

wo have collections maxh for maxHeight, we only give an example here

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    maxh: {
      raw: 'maxHeight',
      type: [String, Number],
      default: ''
    }
  }
});

<q-row maxh="100"></q-row>

The above generative result will be

<div style="max-height:100.000px"></div>

And if maxh is a number,it will translate into percent

<q-row :maxh="10"></q-row>

The above generative result will be

<div style="max-height:10%"></div>

pure

The same as pure of translateType

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    family: {
      raw: 'fontFamily',
      type: String,
      default: '',
      pure: ture
    }
  }
});

<q-row family="monospace"></q-row>

The above generative result will be

<div style="font-family:monospace"></div>

class

The same as class of translateType

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    diyClass: {
      raw: 'rawDiyClass',
      type: String,
      default: '',
      class: ture
    }
  }
});

<q-row diyClass="test"></q-row>

The above generative result will be

<div class="q-layout-rawDiyClass-test"></div>

classPure

The same as classPure of translateType

wo have collections border for border, we only give an example here

import Vue from 'vue';
import QLayout from 'q-layout';
Vue.use(QLayout, {
  collections: {
    border: {
      raw: 'border',
      type: [Boolean, String],
      default: '',
      pureClass: ture
    }
  }
});

if property is a boolean

<q-row border></q-row>

The above generative result will be

<div class="q-layout-border"></div>

if property is a string

<q-row border="1px solid #666"></q-row>

The above generative result will be

<div style="border:1px solid #666"></div>

and will not set a className

Code Hints

We using vetur to provide code hints. The above props are all including in the configuration.

If you have set custom property by using alias coverage or custom property you may need add custom attributes, click here to see vetur's docs,click here to see our default attributes