Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
3f17ac3c
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3f17ac3c
编写于
3月 17, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: layout、col、row
上级
e79a86b8
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
146 addition
and
312 deletion
+146
-312
src/packages/col/index.scss
src/packages/col/index.scss
+9
-0
src/packages/col/index.vue
src/packages/col/index.vue
+6
-5
src/packages/layout/demo.vue
src/packages/layout/demo.vue
+1
-1
src/packages/layout/doc.md
src/packages/layout/doc.md
+86
-261
src/packages/layout/index.vue
src/packages/layout/index.vue
+1
-4
src/packages/row/index.scss
src/packages/row/index.scss
+40
-38
src/packages/row/index.vue
src/packages/row/index.vue
+3
-3
未找到文件。
src/packages/col/index.scss
浏览文件 @
3f17ac3c
...
...
@@ -2,6 +2,15 @@
float
:
left
;
box-sizing
:
border-box
;
word-break
:
break-all
;
&
-gutter
{
&
:last-child
{
padding-right
:
0
!
important
;
}
&
:first-child
{
padding-left
:
0
!
important
;
}
}
}
@for
$i
from
1
through
24
{
...
...
src/packages/col/index.vue
浏览文件 @
3f17ac3c
...
...
@@ -4,7 +4,7 @@
</view>
</
template
>
<
script
lang=
"ts"
>
import
{
reactive
,
computed
,
inject
}
from
'
vue
'
;
import
{
computed
,
inject
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
col
'
);
...
...
@@ -19,20 +19,21 @@ export default create({
default
:
'
0
'
}
},
setup
(
props
,
{
emit
,
slots
}
)
{
setup
(
props
)
{
const
prefixCls
=
componentName
;
const
gutter
=
inject
(
'
gutter
'
);
const
gutter
=
inject
(
'
gutter
'
)
as
number
;
const
classes
=
computed
(()
=>
{
return
{
[
prefixCls
]:
true
,
[
prefixCls
+
'
-gutter
'
]:
gutter
,
[
'
nut-col-
'
+
props
.
span
]:
true
,
[
'
nut-col-offset-
'
+
props
.
offset
]:
true
};
});
const
style
=
computed
(()
=>
{
return
{
paddingLeft
:
gutter
+
'
px
'
,
paddingRight
:
gutter
+
'
px
'
paddingLeft
:
gutter
/
2
+
'
px
'
,
paddingRight
:
gutter
/
2
+
'
px
'
};
});
return
{
...
...
src/packages/layout/demo.vue
浏览文件 @
3f17ac3c
...
...
@@ -57,7 +57,7 @@
</div>
<h2>
Flex布局
</h2>
<div
class=
"box-item"
>
<nut-row
type=
"flex"
flexW
rap=
"nowrap"
>
<nut-row
type=
"flex"
w
rap=
"nowrap"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
...
...
src/packages/layout/doc.md
浏览文件 @
3f17ac3c
...
...
@@ -8,305 +8,130 @@
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
Row
,
Col
}
from
'
@nutui/nutui
'
;
import
{
Layout
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
Row
);
app
.
use
(
Col
);
app
.
use
(
Layout
);
```
## 代码演示
### 基
本
用法
### 基
础
用法
```
html
<nut-row>
<nut-col
:span=
"12"
>
<div
class=
"flex-content"
>
span:12
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content flex-content-light"
>
span:12
</div>
</nut-col>
<nut-col
:span=
"24"
>
<div
class=
"flex-content"
>
span:24
</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col
:span=
"8"
>
<div
class=
"flex-content"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"8"
>
<div
class=
"flex-content flex-content-light"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"8"
>
<div
class=
"flex-content"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content"
>
span:12
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content flex-content-light"
>
span:12
</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"8"
>
<div
class=
"flex-content"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"8"
>
<div
class=
"flex-content flex-content-light"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"8"
>
<div
class=
"flex-content"
>
span:8
</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col
:span=
"4"
>
<div
class=
"flex-content"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"4"
>
<div
class=
"flex-content flex-content-light"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"4"
>
<div
class=
"flex-content"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"4"
>
<div
class=
"flex-content flex-content-light"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"4"
>
<div
class=
"flex-content"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"4"
>
<div
class=
"flex-content flex-content-light"
>
span:4
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
```
### 设置元素间距
```
html
<nut-row
:gutter=
"10"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
<nut-col
:span=
"8"
>
<div
class=
"flex-content"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"
6
"
>
<div
class=
"flex-content
"
>
span:6
</div>
<nut-col
:span=
"
8
"
>
<div
class=
"flex-content
flex-content-light"
>
span:8
</div>
</nut-col>
<nut-col
:span=
"
6
"
>
<div
class=
"flex-content
flex-content-light"
>
span:6
</div>
<nut-col
:span=
"
8
"
>
<div
class=
"flex-content
"
>
span:8
</div>
</nut-col>
</nut-row>
</nut-row>
```
### Flex布局
#### wrap(是否换行)
```
html
<nut-row
type=
"flex"
flexWrap=
"nowrap"
:gutter=
"10"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
1
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
2
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
3
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
4
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
5
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
7
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
flexWrap=
"wrap"
:gutter=
"10"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
1
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
2
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
3
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
4
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
5
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
7
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
flexWrap=
"reverse"
:gutter=
"10"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
1
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
2
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
3
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
4
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
5
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
7
</div>
</nut-col>
</nut-row>
```
#### justify(主轴方向)
```
html
<nut-row
type=
"flex"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
start
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
start
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
start
</div>
</nut-col>
<nut-row
type=
"flex"
wrap=
"nowrap"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
justify=
"center"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
center
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
center
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
center
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
justify=
"end"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
end
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
end
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
end
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
justify=
"space-between"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
between
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
between
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
between
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
justify=
"space-around"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
around
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
around
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
around
</div>
</nut-col>
</nut-row>
```
#### align(侧轴方向)
```
html
<nut-row
type=
"flex"
gutter=
"10"
align=
"flex-start"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
1
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content flex-content-light"
>
顶部对齐 - flex-start
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
3
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
gutter=
"10"
align=
"center"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
1
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content flex-content-light"
>
居中对齐 - center
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
3
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
gutter=
"10"
align=
"flex-end"
>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
1
</div>
</nut-col>
<nut-col
:span=
"12"
>
<div
class=
"flex-content flex-content-light"
>
底部对齐 - flex-end
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-height"
>
3
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
```
### 分栏偏移
```
html
<nut-row
type=
"flex"
>
<nut-col
:offset=
"6"
span=
"6"
>
<div
class=
"flex-content"
>
offset:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
span:6
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
>
<nut-col
span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
<nut-col
:offset=
"8"
:span=
"6"
>
<div
class=
"flex-content flex-content-light"
>
offset:8
</div>
</nut-col>
<nut-col
:span=
"6"
>
<div
class=
"flex-content"
>
span:6
</div>
</nut-col>
</nut-row>
<nut-row
type=
"flex"
>
<nut-col
span=
"6"
:offset=
"6"
>
<div
class=
"flex-content"
>
offset:6
</div>
</nut-col>
<nut-col
:span=
"6"
:offset=
"6"
>
<div
class=
"flex-content"
>
offset:6
</div>
</nut-col>
</nut-row>
```
## Prop
...
...
src/packages/layout/index.vue
浏览文件 @
3f17ac3c
...
...
@@ -4,10 +4,7 @@ const { create } = createComponent('layout');
import
Row
from
'
@/packages/row/index.vue
'
;
import
Col
from
'
@/packages/col/index.vue
'
;
export
default
create
({
components
:
{
[
Row
.
name
]:
Row
,
[
Col
.
name
]:
Col
}
children
:
[
Row
,
Col
]
});
</
script
>
...
...
src/packages/row/index.scss
浏览文件 @
3f17ac3c
.nut-row
{
width
:
100%
;
&
:after
{
display
:
block
;
height
:
0
;
...
...
@@ -6,44 +7,45 @@
visibility
:
hidden
;
content
:
''
;
}
}
.nut-row-flex
{
display
:
flex
;
&
:after
{
display
:
none
;
&
-flex
{
display
:
flex
;
&
:after
{
display
:
none
;
}
.nut-col
{
float
:
none
;
}
}
.nut-col
{
float
:
none
;
&
-justify-center
{
justify-content
:
center
;
}
&
-justify-end
{
justify-content
:
flex-end
;
}
&
-justify-space-between
{
justify-content
:
space-between
;
align-items
:
center
;
}
&
-justify-space-around
{
justify-content
:
space-around
;
}
&
-align-flex-start
{
align-items
:
flex-start
;
}
&
-align-center
{
align-items
:
center
;
}
&
-align-flex-end
{
align-items
:
flex-end
;
}
&
-flex-wrap
{
flex-wrap
:
wrap
;
}
&
-flex-nowrap
{
flex-wrap
:
nowrap
;
}
&
-flex-reverse
{
flex-wrap
:
wrap-reverse
;
}
}
.nut-row-justify-center
{
justify-content
:
center
;
}
.nut-row-justify-end
{
justify-content
:
flex-end
;
}
.nut-row-justify-space-between
{
justify-content
:
space-between
;
align-items
:
center
;
}
.nut-row-justify-space-around
{
justify-content
:
space-around
;
}
.nut-row-align-flex-start
{
align-items
:
flex-start
;
}
.nut-row-align-center
{
align-items
:
center
;
}
.nut-row-align-flex-end
{
align-items
:
flex-end
;
}
.nut-row-flex-wrap
{
flex-wrap
:
wrap
;
}
.nut-row-flex-nowrap
{
flex-wrap
:
nowrap
;
}
.nut-row-flex-reverse
{
flex-wrap
:
wrap-reverse
;
}
src/packages/row/index.vue
浏览文件 @
3f17ac3c
...
...
@@ -4,7 +4,7 @@
</view>
</
template
>
<
script
lang=
"ts"
>
import
{
computed
,
provide
}
from
'
vue
'
;
import
{
provide
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
row
'
);
...
...
@@ -26,7 +26,7 @@ export default create({
type
:
String
,
default
:
'
flex-start
'
},
flexW
rap
:
{
w
rap
:
{
type
:
String
,
default
:
'
nowrap
'
}
...
...
@@ -46,7 +46,7 @@ export default create({
${
getClass
(
''
,
props
.
type
)}
${
getClass
(
'
justify
'
,
props
.
justify
)}
${
getClass
(
'
align
'
,
props
.
align
)}
${
getClass
(
'
flex
'
,
props
.
flexW
rap
)}
${
getClass
(
'
flex
'
,
props
.
w
rap
)}
${
prefixCls
}
`
;
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录