mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
78 lines
1.2 KiB
Markdown
78 lines
1.2 KiB
Markdown
# Layout Introduction
|
|
|
|
**官方文档**: https://uviewpro.cn
|
|
|
|
|
|
## Instructions
|
|
|
|
This example provides an introduction to uView Pro layout templates.
|
|
|
|
### Key Concepts
|
|
|
|
- Layout categories
|
|
- Layout usage
|
|
- Responsive layout
|
|
|
|
### Example: Layout Categories
|
|
|
|
**Grid Layout (网格布局)**:
|
|
- Grid system
|
|
- Responsive grid
|
|
- Grid columns
|
|
|
|
**Flex Layout (弹性布局)**:
|
|
- Flex container
|
|
- Flex items
|
|
- Flex direction
|
|
|
|
**Container Layout (容器布局)**:
|
|
- Container
|
|
- Header
|
|
- Content
|
|
- Footer
|
|
|
|
### Example: Grid Layout
|
|
|
|
```vue
|
|
<template>
|
|
<u-grid :col="3">
|
|
<u-grid-item>
|
|
<view>Item 1</view>
|
|
</u-grid-item>
|
|
<u-grid-item>
|
|
<view>Item 2</view>
|
|
</u-grid-item>
|
|
<u-grid-item>
|
|
<view>Item 3</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</template>
|
|
```
|
|
|
|
### Example: Flex Layout
|
|
|
|
```vue
|
|
<template>
|
|
<view class="flex-container">
|
|
<view class="flex-item">Item 1</view>
|
|
<view class="flex-item">Item 2</view>
|
|
<view class="flex-item">Item 3</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
.flex-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Key Points
|
|
|
|
- Multiple layout options
|
|
- Responsive design
|
|
- Easy to use
|
|
- Well documented
|
|
- Flexible configuration
|