grid-zhcn

This commit is contained in:
liumeo 2020-01-02 22:40:12 +08:00
parent 2cc620a031
commit c8e15966f7
5 changed files with 124 additions and 0 deletions

View File

@ -0,0 +1,27 @@
# 基础
```html
<n-row :gutter="12">
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
</n-row>
```
```css
.red {
height: 108px;
background-color: rgba(128, 0, 0, .5);
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, .5);
}
```

View File

@ -0,0 +1,41 @@
# 间隔
```html
<n-row :gutter="[12, 8]">
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
</n-row>
<n-row :gutter="[12, 8]">
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
</n-row>
```
```css
.red {
height: 108px;
background-color: rgba(128, 0, 0, .5);
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, .5);
}
```

View File

@ -0,0 +1,8 @@
# 栅格
<!--single-column-->
```demo
basic
gutter
offset
push-pull
```

View File

@ -0,0 +1,21 @@
# 偏移
```html
<n-row :gutter="12">
<n-col :span="6" :offset="6">
<div class="red"></div>
</n-col>
<n-col :span="6" :offset="6">
<div class="green"></div>
</n-col>
</n-row>
```
```css
.red {
height: 108px;
background-color: rgba(128, 0, 0, .5);
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, .5);
}
```

View File

@ -0,0 +1,27 @@
# 排序
```html
<n-row :gutter="12">
<n-col :span="6" :push="6">
<div class="red"></div>
</n-col>
<n-col :span="6" :pull="6">
<div class="green"></div>
</n-col>
<n-col :span="6">
<div class="red"></div>
</n-col>
<n-col :span="6">
<div class="green"></div>
</n-col>
</n-row>
```
```css
.red {
height: 108px;
background-color: rgba(128, 0, 0, .5);
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, .5);
}
```