Skip to content

Commit ca5094a

Browse files
XutaotaotaoXutaotaotao
committed
doc:add grid doc
1 parent 44459a6 commit ca5094a

File tree

3 files changed

+239
-4
lines changed

3 files changed

+239
-4
lines changed

‎doc/markdown/nGrid/en-US/index.md

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
From stacked to horizontal arrangement. With a single set of Row and Col grid components, a basic grid system can be created, and all columns (Col) must be placed in a Row.
77

88
### Examples
9+
**Base grid**：From stacked to horizontal arrangement. With a single set of Row and Col grid components, a basic grid system can be created, and all columns (Col) must be placed in a Row.
910
:::demo
1011
```html
1112
<template>
@@ -80,7 +81,121 @@ From stacked to horizontal arrangement. With a single set of Row and Col grid co
8081
}
8182
</script>
8283
```
84+
:::
85+
86+
**Left and right offset**：Column offset. Use offset to offset the column to the right. For example, offset = "8" shifts the element to the right by the width of 8 columns.
87+
:::demo
88+
```html
89+
<template>
90+
<n-row>
91+
<n-col span="8">
92+
<div v-bind:style="styleObjectOne">
93+
8
94+
</div>
95+
</n-col>
96+
<n-col span="8" offset="8">
97+
<div v-bind:style="styleObjectOne">
98+
8
99+
</div>
100+
</n-col>
101+
</n-row>
102+
</template>
103+
<script>
104+
export default {
105+
data: function () {
106+
return {
107+
styleObjectOne: {
108+
background: `rgba(0, 160, 233, 0.7)` ,
109+
color: '#fff',
110+
height:'50px',
111+
},
112+
}
113+
}
114+
}
115+
</script>
116+
```
117+
:::
83118

119+
**flex alignment**：Flex child elements aligned vertically.
120+
:::demo
121+
```html
122+
<template>
123+
<n-row align="top">
124+
<n-col span="8">
125+
<div v-bind:style="styleObjectOne">
126+
8
127+
</div>
128+
</n-col>
129+
<n-col span="8" >
130+
<div v-bind:style="styleObjectTwo">
131+
8
132+
</div>
133+
</n-col>
134+
<n-col span="8" >
135+
<div v-bind:style="styleObjectThree">
136+
8
137+
</div>
138+
</n-col>
139+
</n-row>
140+
<n-row align="middle">
141+
<n-col span="8">
142+
<div v-bind:style="styleObjectOne">
143+
8
144+
</div>
145+
</n-col>
146+
<n-col span="8" >
147+
<div v-bind:style="styleObjectTwo">
148+
8
149+
</div>
150+
</n-col>
151+
<n-col span="8" >
152+
<div v-bind:style="styleObjectThree">
153+
8
154+
</div>
155+
</n-col>
156+
</n-row>
157+
<n-row align="buttom">
158+
<n-col span="8">
159+
<div v-bind:style="styleObjectOne">
160+
8
161+
</div>
162+
</n-col>
163+
<n-col span="8" >
164+
<div v-bind:style="styleObjectTwo">
165+
8
166+
</div>
167+
</n-col>
168+
<n-col span="8" >
169+
<div v-bind:style="styleObjectThree">
170+
8
171+
</div>
172+
</n-col>
173+
</n-row>
174+
</template>
175+
<script>
176+
export default {
177+
data: function () {
178+
return {
179+
styleObjectOne: {
180+
background: `rgba(0, 160, 233, 0.7)` ,
181+
color: '#fff',
182+
height:'100px',
183+
},
184+
styleObjectTwo: {
185+
background: `#00a0e9` ,
186+
color: '#fff',
187+
height:'50px',
188+
},
189+
styleObjectThree: {
190+
background: `rgba(0, 160, 233, 0.7)`,
191+
color: '#fff',
192+
height:'150px',
193+
}
194+
}
195+
}
196+
}
197+
</script>
198+
```
84199
:::
85200

86201
### API

‎doc/markdown/nGrid/zh-CN/index.md

Lines changed: 115 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22

33
24 栅格系统。
44

5-
## 基础
6-
从堆叠到水平排列。使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。
75

86
### 代码演示
7+
**基础栅格**：从堆叠到水平排列。使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。
98
:::demo
109
```html
1110
<template>
@@ -80,7 +79,121 @@
8079
}
8180
</script>
8281
```
82+
:::
83+
84+
**左右偏移**：列偏移。使用 offset 可以将列向右侧偏。例如，offset="8" 将元素向右侧偏移了 8 个列（column）的宽度。
85+
:::demo
86+
```html
87+
<template>
88+
<n-row>
89+
<n-col span="8">
90+
<div v-bind:style="styleObjectOne">
91+
8
92+
</div>
93+
</n-col>
94+
<n-col span="8" offset="8">
95+
<div v-bind:style="styleObjectOne">
96+
8
97+
</div>
98+
</n-col>
99+
</n-row>
100+
</template>
101+
<script>
102+
export default {
103+
data: function () {
104+
return {
105+
styleObjectOne: {
106+
background: `rgba(0, 160, 233, 0.7)` ,
107+
color: '#fff',
108+
height:'50px',
109+
},
110+
}
111+
}
112+
}
113+
</script>
114+
```
115+
:::
83116

117+
**flex对齐**：Flex 子元素垂直对齐。
118+
:::demo
119+
```html
120+
<template>
121+
<n-row align="top">
122+
<n-col span="8">
123+
<div v-bind:style="styleObjectOne">
124+
8
125+
</div>
126+
</n-col>
127+
<n-col span="8" >
128+
<div v-bind:style="styleObjectTwo">
129+
8
130+
</div>
131+
</n-col>
132+
<n-col span="8" >
133+
<div v-bind:style="styleObjectThree">
134+
8
135+
</div>
136+
</n-col>
137+
</n-row>
138+
<n-row align="middle">
139+
<n-col span="8">
140+
<div v-bind:style="styleObjectOne">
141+
8
142+
</div>
143+
</n-col>
144+
<n-col span="8" >
145+
<div v-bind:style="styleObjectTwo">
146+
8
147+
</div>
148+
</n-col>
149+
<n-col span="8" >
150+
<div v-bind:style="styleObjectThree">
151+
8
152+
</div>
153+
</n-col>
154+
</n-row>
155+
<n-row align="buttom">
156+
<n-col span="8">
157+
<div v-bind:style="styleObjectOne">
158+
8
159+
</div>
160+
</n-col>
161+
<n-col span="8" >
162+
<div v-bind:style="styleObjectTwo">
163+
8
164+
</div>
165+
</n-col>
166+
<n-col span="8" >
167+
<div v-bind:style="styleObjectThree">
168+
8
169+
</div>
170+
</n-col>
171+
</n-row>
172+
</template>
173+
<script>
174+
export default {
175+
data: function () {
176+
return {
177+
styleObjectOne: {
178+
background: `rgba(0, 160, 233, 0.7)` ,
179+
color: '#fff',
180+
height:'100px',
181+
},
182+
styleObjectTwo: {
183+
background: `#00a0e9` ,
184+
color: '#fff',
185+
height:'50px',
186+
},
187+
styleObjectThree: {
188+
background: `rgba(0, 160, 233, 0.7)`,
189+
color: '#fff',
190+
height:'150px',
191+
}
192+
}
193+
}
194+
}
195+
</script>
196+
```
84197
:::
85198

86199
### API

‎packages/nRow/src/index.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,22 @@ export default {
2828
type: [String],
2929
default: 'center'
3030
}
31-
3231
},
3332
computed: {
3433
gutterStyle () {
3534
const temp = this.gutter ? { marginLeft: -this.gutter + 'px', marginRight: -this.gutter + 'px' } : ''
35+
let alignItems = ''
36+
if (this.align === 'top') {
37+
alignItems = 'flex-start'
38+
} else if (this.align === 'middle') {
39+
alignItems = 'center'
40+
} else if (this.align === 'buttom') {
41+
alignItems = 'flex-end'
42+
}
3643
return {
3744
'display': 'flex',
3845
'justify-content': this.justify,
39-
'align-items': this.align,
46+
'align-items': alignItems,
4047
...temp
4148
}
4249
}

0 commit comments

Comments
 (0)