Are you an LLM? You can read better optimized documentation at /front/component/ma-form/examples/layout-systems.md for this page in Markdown format
Layout System โ
Demonstrates MaForm's two layout systems: Flex grid layout and Grid spacing layout, along with responsive design implementation.
Features โ
- Dual Layout Systems: Supports both Flex and Grid layout methods
- Responsive Grid: Responsive layout based on Element Plus grid system
- Breakpoint Adaptation: Supports five breakpoints (xs, sm, md, lg, xl)
- Flexible Configuration: Each form item can have individual layout properties
- Mobile Optimization: Automatically switches to single-column layout on mobile
Flex Layout (Default) โ
Grid system implemented using Element Plus's el-row and el-col:
Basic Configuration โ
typescript
const formOptions = {
layout: 'flex',
flex: {
gutter: 20, // Grid spacing
type: 'flex', // Enable flex mode
justify: 'start', // Horizontal alignment
align: 'middle' // Vertical alignment
}
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Grid Configuration โ
typescript
const formItem = {
label: 'Title',
prop: 'title',
render: 'input',
cols: {
span: 12, // Occupies 12 columns (out of 24)
offset: 0, // Left margin columns
push: 0, // Move right columns
pull: 0, // Move left columns
order: 1, // Sort priority
// Responsive configuration
xs: 24, // Extra small screens: full width
sm: 12, // Small screens: half width
md: 8, // Medium screens: one-third width
lg: 6, // Large screens: one-quarter width
xl: 4 // Extra large screens: one-sixth width
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Grid Layout โ
Spacing layout implemented using Element Plus's el-space:
Basic Configuration โ
typescript
const formOptions = {
layout: 'grid',
grid: {
direction: 'vertical', // Arrangement direction
size: 'large', // Spacing size: small | default | large
wrap: true, // Whether to wrap
fill: true, // Whether to fill container width
fillRatio: 30, // Fill ratio
alignment: 'start' // Alignment method
}
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Use Cases โ
- Vertical Forms: Simple forms with few fields
- Dynamic Forms: Forms with uncertain number of fields
- Compact Layouts: Space-saving scenarios
Responsive System โ
Breakpoint Definitions โ
| Breakpoint | Device Type | Width Range | Recommended Columns |
|---|---|---|---|
xs | Mobile portrait | < 768px | 1 column |
sm | Mobile landscape/small tablet | โฅ 768px | 1-2 columns |
md | Tablet | โฅ 992px | 2-3 columns |
lg | Small desktop | โฅ 1200px | 3-4 columns |
xl | Large desktop | โฅ 1920px | 4+ columns |
Responsive Configuration Example โ
typescript
// Responsive form item configuration
const responsiveField = {
label: 'Title',
prop: 'title',
render: 'input',
cols: {
// Mobile-first
xs: { span: 24 }, // Mobile: full width
sm: { span: 12, offset: 0 }, // Small screen: two columns
md: { span: 8, offset: 0 }, // Medium screen: three columns
lg: { span: 6, offset: 0 }, // Large screen: four columns
xl: { span: 4, offset: 2 } // Extra large screen: six columns with left margin
}
}
// Global responsive configuration
const formOptions = {
responsiveConfig: {
enabled: true,
mobileSingleColumn: true, // Force single column on mobile
mobileHideLabels: false, // Whether to hide labels on mobile
breakpoints: {
xs: 576,
sm: 768,
md: 992,
lg: 1200,
xl: 1920
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Layout Best Practices โ
1. Choose the Right Layout System โ
typescript
// Complex forms โ Use Flex layout
const complexForm = {
layout: 'flex',
flex: { gutter: 16 }
}
// Simple forms โ Use Grid layout
const simpleForm = {
layout: 'grid',
grid: { direction: 'vertical', size: 'medium' }
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2. Plan Grids Properly โ
typescript
// Standard three-column layout
const threeColumnLayout = {
cols: {
xs: 24, // Mobile: single column
sm: 24, // Small screen: single column
md: 8, // Medium screen: three columns
lg: 8, // Large screen: three columns
xl: 8 // Extra large screen: three columns
}
}
// Primary-secondary layout
const primarySecondaryLayout = {
// Primary field
cols: { xs: 24, sm: 16, md: 12, lg: 16 },
// Secondary field
cols: { xs: 24, sm: 8, md: 6, lg: 8 }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3. Mobile Optimization โ
typescript
const mobileOptimized = {
mobileBreakpoint: 768,
responsiveConfig: {
enabled: true,
mobileSingleColumn: true, // Single column on mobile
mobileHideLabels: false // Keep labels visible
}
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8