Element – UI — Layout Layout
The company requires the layout as shown below:
The relevant code is as follows (only layout related operations have been written here for emphasis on layout presentation) :
<el-row>
<el-col :span="12">
<! -- Input box 1 -->
<el-col :span="24">Enter box 1 related code</el-col>
<! -- Input box 2 -->
<el-col :span="24">Input box 2 related code</el-col>
<! -- Drop down box 1 -->
<el-col :span="24">Drop - down box a related code</el-col>
</el-col>-- -- -- -- -- -- here, the part of the code above is on the left side of the columns, the following code is on the right side column part -- -- -- -- -- < el - col: span ="11" :offset="1"> <! -- Input box 3 --><el-col :span="24">Enter box three related codes</el-col><! -- Map Display --><el-col :span="24">Map code</el-col>
</el-col>
</el-row>
Copy the codeAnalysis of ideas:
-
There are two el-cols in the el-row to hold the left and right columns
-
The two EL-Col are divided into 24 columns in total, and related mini-layouts are carried out in each column. In the mini-layout, the span of El-Col is 24 in order to fill up the space in the mini-layout
-
The offset also counts as a column
(Emphasis!) A layout column has 24 columns, making it easy to create a layout quickly. (The following are excerpted from the official Elder-UI document, mainly to strengthen memory, if you don’t like it, you can read it directly!)
-
Basic layout
Use a single column to create a basic grid layout, through row and COL components, and through col componentsspanProperties allow for a freely composed layout.
The first is to fill it up24Columns < el - row ><el-col :span='24'></el-col></el-row> The second type, using two modules respectively12Columns, the24<el-row><el-col :span='12'></el-col>
<el-col :span='12'></el-col></el-row> Subsequent conditions, according to their own needs to changeCopy the code-
Column spacing
There are gaps between columns, provided by the Row componentgutterProperty to specify the interval between each column. The default interval is 0.
<el-row ::gutter='20'>
<el-col :span="12></el-col>
<el-col :span="12></el-col>
</el-row>
Copy the code-
Hybrid layout
A complex hybrid layout is formed by arbitrarily extending the combination of basic 1/24 columns.
Case one <el-row :gutter="20">
<el-col :span="16"></el-col>
<el-col :span="8"></el-col></el-row> gutter="20">
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
<el-col :span="8"></el-col></el-row> In other cases, you can freely combine them as requiredCopy the code-
The column offset
Support offset specifies the number of columns (offset from left to right) by specifying the COL componentoffsetProperty to specify the number of columns offset by column.
This is according to their own needs, free arrangement is free to write, understand what the function of offset, you know you are the magic brush ma Liang!! <el-row :gutter="24">
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
</el-row>
Copy the code-
alignment
throughflexLayout to columns for flexible alignment, willtypeProperty is assigned to ‘flex’ to enable the Flex layout and passjustifyProperty to specify the values of start, center, end, space-between, and space-around to define the layout of child elements.
In case one, the horizontal arrangement of (justify) is Center <el-row type="flex" justify="center">
<el-col :span="6"></el-col>
<el-col :span="8"></el-col>
<el-col :span="10"></el-col></el-row> In case two flex layout, (justify) in horizontal order would be end <el-row :gutter="16" type="flex: justify="end">
<el-col :span="2"></el-col>
<el-col :span="19"></el-col>
<el-col :span="3"> For other cases, see the official elder-UI documentationCopy the codeRow and Col related properties
Row related attributes
| parameter | instructions | type | An optional value | The default value |
|---|---|---|---|---|
| gutter | Grid spacing | number | – | 0 |
| type | Layout mode, flex optional, available in modern browsers | string | – | – |
| justify | Horizontal arrangement in flex layout | string | start/end/center/space-around/space-between | start |
| align | Vertical arrangement in Flex layout | string | top/middle/bottom | – |
| tag | Custom element tags | string | * | div |
Col related attributes
| parameter | instructions | type | An optional value | The default value |
|---|---|---|---|---|
| span | The number of columns occupied by the grid | number | – | 24 |
| offset | The number of spacing cells to the left of the grid | number | – | 0 |
| push | The grid moves to the right | number | – | 0 |
| pull | Grid moves to the left | number | – | 0 |
| xs | <768pxA responsive raster number or raster property object |
Number /object (e.g. {span: 4, offset: 4}) | – | – |
| sm | P 768 px.A responsive raster number or raster property object |
Number /object (e.g. {span: 4, offset: 4}) | – | – |
| md | P 992 px.A responsive raster number or raster property object |
Number /object (e.g. {span: 4, offset: 4}) | – | – |
| lg | P 1200 px.A responsive raster number or raster property object |
Number /object (e.g. {span: 4, offset: 4}) | – | – |
| xl | P 1920 px.A responsive raster number or raster property object |
Number /object (e.g. {span: 4, offset: 4}) | – | – |
| tag | Custom element tags | string | * | div |