Слияние кода завершено, страница обновится автоматически
| category | type | cols | title |
|---|---|---|---|
Components |
Layout |
1 |
Grid |
24 Grids System。
In most business situations, Choerodon HAP UI need solve a lot of information storage problems within the design area,so based on 12 Grids System,we divided the design area into 24 aliquots.
We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
Following is a brief look at how it works:
column in the horizontal space defined by row (abbreviated col)col, and only col should be placed directly in row
.col-8 (span=8).col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.
Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
Choerodon HAP UI layout component if it can not meet your needs, you can use the excellent layout of the components of the community:
| Property | Description | Type | Default |
|---|---|---|---|
| align | the vertical alignment of the flex layout: top middle bottom
|
string | top |
| gutter | spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}
|
number/object | 0 |
| justify | horizontal arrangement of the flex layout: start end center space-around space-between
|
string | start |
| type | layout mode, optional flex, browser support
|
string |
| Property | Description | Type | Default |
|---|---|---|---|
| offset | the number of cells to offset Col from the left | number | 0 |
| order | raster order, used in flex layout mode |
number | 0 |
| pull | the number of cells that raster is moved to the left | number | 0 |
| push | the number of cells that raster is moved to the right | number | 0 |
| span | raster number of cells to occupy, 0 corresponds to display: none
|
number | none |
| xs |
<576px and also default setting, could be a span value or an object containing above props |
number|object | - |
| sm |
≥576px, could be a span value or an object containing above props |
number|object | - |
| md |
≥768px, could be a span value or an object containing above props |
number|object | - |
| lg |
≥992px, could be a span value or an object containing above props |
number|object | - |
| xl |
≥1200px, could be a span value or an object containing above props |
number|object | - |
| xxl |
≥1600px, could be a span value or an object containing above props |
number|object | - |
The breakpoints of responsive grid follow BootStrap 4 media queries rules(not including occasionally part).
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )