mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

grid-zhcn

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
demo/documentation/components/grid/zhCN/basic.md Normal file
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);
}
```

41
demo/documentation/components/grid/zhCN/gutter.md Normal file
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);
}
```

8
demo/documentation/components/grid/zhCN/index.md
View File

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

21
demo/documentation/components/grid/zhCN/offset.md Normal file
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);
}
```

27
demo/documentation/components/grid/zhCN/pushPull.md Normal file
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);
}
```