🌏 Translated with the assistance of DeepSeek and ChatGPT
Row
A grid component based on CSS Flex layout, providing responsive layout to make it easier for pages to adapt to different screen widths.
Basic Usage
The Row component divides the content area into 24 equal parts.
Span 24 | Width 100%
Span 12 | Width 50%
Span 12 | Width 50%
Span 8 | Width 33.3333%
Span 8 | Width 33.3333%
Span 8 | Width 33.3333%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Hide source code
Grid Size
The span property of Col sets the grid width. 'xs', 'sm', 'md', 'lg', 'xl', and 'xxl' correspond to the window pixel widths of , , , , , and , respectively.
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Responsive
Responsive
Responsive
Responsive
Responsive
Responsive
Hide source code
Grid Offset
The offset property of Col sets the grid offset. It also supports responsiveness.
Span 6 | Offset 6
Span 8 | Offset 4
Span 6 | Offset Responsive
Hide source code
Grid Gutter
The gutter property of Row sets the grid gutter. It also supports responsiveness.
x: 4px, y: 4px
Content
Content
Content
Content
x: 8px, y: 4px
Content
Content
Content
Content
Responsive
Content
Content
Content
Content
Hide source code
Horizontal Alignment
The justify property of Row sets the horizontal alignment.
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Space Between
Content
Content
Content
Content
Space Around
Content
Content
Content
Content
Space Evenly
Content
Content
Content
Content
Hide source code
Vertical Alignment
The align property of Row sets the vertical alignment.
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Stretch
Content
Content
Content
Content
Hide source code
API
RowProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| gutter | number | { x?: number; y?: number } | Value4DeviceWidth<number | { x?: number; y?: number }> | True | 0 | The interval between child components Col. | 0.0.0-beta |
| justify | 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | True | 'start' | The horizontal alignment of Row, based on the CSS justify-content property. | 0.0.0-beta |
| align | 'start' | 'center' | 'end' | 'stretch' | True | 'start' | The vertical alignment of Row, based on the CSS align-items property. | 0.0.0-beta |
| wrap | boolean | True | true | Whether Child components Col can wrap. | 0.0.0-beta |
RowSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Child components Col. | 0.0.0-beta |
ColProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| offset | number | ValueWithDeviceWidth<number> | True | 0 | The offset to the left of Col. | 0.0.0-beta |
| span | number | ValueWithDeviceWidth<number> | True | 24 | The width of Col. | 0.0.0-beta |
ColSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The Col's content. | 0.0.0-beta |
ValueWithDeviceWidth
ts
enum SCREEN_SIZE_TYPE {
XS = 'xs',
SM = 'sm',
MD = 'md',
LG = 'lg',
XL = 'xl',
XXL = 'xxl'
}
type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>