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"
Analysis 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, the24el-rowel-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 code
Row 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 |
Today, when I was working on a project of the company, I was required to separate the left and right sides of the layout in a dialogue layer, but I couldn't do it. I always wanted to wrap the right side of the div tag, and then adjust the CSS layout, but it didn't happen. When my supervisor saw that I didn't do it, he asked me to adjust the CSS layout directly. I was thinking that element-UI should have operations related to layout, but I didn't know that. Then IT occurred to me that my colleague had developed a similar page, so I went to look at his code, and sure enough, I found the code of the same page layout. I looked at it for a while and understood it. Then I achieved the left and right layout operation I want, record, so as not to make mistakes in the future!
Itchao come on! I will be a very good front-end development engineer!
---- August 17, 2021 19:28:38
