My Little World

布局

发表于

实现布局的几种方式

1.从0开始用 CSS实现
2.使用 CSS Grid 系统 （通过class实现，无需关心布局如何实现,同时可以适应不同屏幕的尺寸）
3.使用组件库,例如 antd（通过组件标签实现）

布局常见场景:侧边栏宽度可调整
1.手动实现拖放逻辑
2.使用 local storage 存储宽度位置

上中下结构,中间高度随父级高度自适应，头部和底部高度固定

1
2
3
4
5
<div className="app-layout1">
    <div className="header">Header</div>
    <div className="content">content</div>
    <div className="footer">Footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.app-layout1 {
  width: 500px;
  height: 400px;
  position: relative;
  background-color: #eee;
  text-align: center;
}

.app-layout1 .header {
  line-height: 60px;
  border-bottom: 2px solid #fff;
}
.app-layout1 .content {
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 0;
  right: 0;
}
.app-layout1 .footer {
  border-top: 2px solid #fff;
  line-height: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
</style>

导航布局，左边是导航栏，右边上中下结构

1
2
3
4
5
6
<div className="app-layout2">
    <div className="header">Header</div>
    <div className="sider">Sider</div>
    <div className="content">Content</div>
    <div className="footer">Footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.app-layout2 {
  width: 500px;
  height: 400px;
  position: relative;
  background-color: #eee;
  text-align: center;
  padding-left: 150px;
  line-height: 60px;
}

.app-layout2 .header {
  border-bottom: 2px solid #fff;
}
.app-layout2 .content {
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 150px;
  right: 0;
}
.app-layout2 .sider {
  width: 150px;
  position: absolute;
  border-right: 2px solid #fff;
  top: 0;
  left: 0;
  bottom: 0;
}
.app-layout2 .footer {
  border-top: 2px solid #fff;
  bottom: 0;
  left: 150px;
  right: 0;
  position: absolute;
}

导航栏随鼠标滑动调整宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from "react";
import { Button } from "antd";
import "./LayoutResize.css";

export default class LayoutResize extends React.PureComponent {
  state = {
    dragging: false,
    startPageX: 0,
    siderWidth: 150,
  };

  handleMouseDown = evt => {
    this.setState({
      dragging: true,
      startPageX: evt.pageX,
    });
  };
  handleMouseUp = () => {
    this.setState({
      dragging: false,
    });
  };
  handleMouseMove = evt => {
    let siderWidth = this.state.siderWidth + evt.pageX - this.state.startPageX;
    if (siderWidth < 20 || siderWidth > 300) return;
    this.setState({
      siderWidth,
      startPageX: evt.pageX,
    });
  };
  render() {
    const { dragging, siderWidth } = this.state;
    const pxWidth = `${siderWidth}px`;
    return (
      <div className="app-layout-resize" style={{ paddingLeft: pxWidth }}>
        <div className="header">Header</div>
        <div className="sider" style={{ width: pxWidth }}>
          Sider
        </div>
        <div className="content" style={{ left: pxWidth }}>
          Content
        </div>
        <div className="footer" style={{ left: pxWidth }}>
          Footer
        </div>
        <div
          className="sider-resizer"
          style={{ left: pxWidth }}
          onMouseDown={this.handleMouseDown}
        />
        {dragging && (
          <div
            className="resize-mask"
            onMouseMove={this.handleMouseMove}
            onMouseUp={this.handleMouseUp}
          />
        )}
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.app-layout-resize {
  width: 500px;
  height: 400px;
  position: relative;
  background-color: #eee;
  text-align: center;
  padding-left: 150px;
  line-height: 60px;
}

.app-layout-resize .header {
  border-bottom: 2px solid #fff;
}
.app-layout-resize .content {
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 0;
  right: 0;
}
.app-layout-resize .sider {
  width: 150px;
  position: absolute;
  border-right: 2px solid #fff;
  top: 0;
  left: 0;
  bottom: 0;
}
.app-layout-resize .footer {
  border-top: 2px solid #fff;
  bottom: 0;
  left: 150px;
  right: 0;
  position: absolute;
}

.app-layout-resize .sider-resizer {
  position: absolute;
  left: 148px;
  width: 6px;
  top: 0;
  bottom: 0;
  cursor: col-resize;
}
.app-layout-resize .resize-mask {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: col-resize;
}