Ant Design－Layout

9月 22 2022 Antd

熟了以後就能快速刻出 Layout。

基本結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Layout } from 'antd'

function App() {
  return (
    <Layout>This is header</Layout.Header>
      <Layout>
        <Layout.Sider>This is side bar</Layout.Sider>
        <Layout.Content>This is content</Layout.Content>
      </Layout>
      <Layout.Footer>This is Footer</Layout.Footer>
    </Layout>
  )
}
export default App

主要的功能是建立結構與 HTML Semantic Tag，不過因為有預設樣式所以看起來會很奇葩：

basic

這時候你可以直接用預設的 className 去改，亦或是加上自己的 className 來改，這裡我選擇後者：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function App() {
  return (
    <Layout className='demo-layout-wrapper'>
      <Layout.Header className='demo-layout-header'>
        <h2>This is header</h2>
      </Layout.Header>
      <Layout>
        <Layout.Sider className='demo-layout-sider'>
          <h2>This is side bar</h2>
        </Layout.Sider>
        <Layout.Content className='demo-layout-content'>
          <h2>This is content</h2>
        </Layout.Content>
      </Layout>
      <Layout.Footer className='demo-layout-footer'>
        <h2>This is Footer</h2>
      </Layout.Footer>
    </Layout>
  )
}
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
h2 {
  color: white;
  text-align: center;
  margin-bottom: 0;
}

.demo-layout-wrapper {
  color: white;
  .demo-layout-header {
    color: white;
    background-color: #5dadfb;
    text-align: center;
    height: 70px;
  }
  .demo-layout-sider {
    background-color: #73b9fc;
    height: calc(100vh - 150px);
    .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .demo-layout-content {
    background-color: #419ffb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .demo-layout-footer {
    background-color: #94c7f8;
    height: 80px;
    font-size: 0.8rem;
  }
}

add-style

範例

邊看文件邊練習後，大概就能做出基本的網站樣貌：

example

原始碼：

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import {
  Breadcrumb,
  Button,
  CheckboxOptionType,
  Col,
  Image,
  Layout,
  Menu,
  Radio,
  Rate,
  Row,
  Spin
} from 'antd'
import { ItemType } from 'antd/lib/menu/hooks/useItems'
import { useEffect, useState } from 'react'

function App() {
  const [loading, setLoading] = useState<boolean>(true)
  const menu: ItemType[] = Array(5)
    .fill(null)
    .map((_, index) => ({
      key: index + 1,
      label: `Nav ${index + 1}`
    }))
  const options: CheckboxOptionType[] = [
    { label: 'XXS', value: 'xxs' },
    { label: 'XS', value: 'xs' },
    { label: 'S', value: 's' },
    { label: 'M', value: 'm' },
    { label: 'L', value: 'l' },
    { label: 'XL', value: 'xl' },
    { label: 'XXL', value: 'xxl' }
  ]

  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 1000)
  }, [])

  return (
    <Layout className='demo-layout-wrapper'>
      <Layout.Header className='demo-layout-header'>
        <div className='demo-layout-header-left'>
          <div className='demo-layout-header-logo'></div>
        </div>
        <div className='demo-layout-header-right'>
          <Menu mode='horizontal' items={menu} />
        </div>
      </Layout.Header>
      <Layout.Content className='demo-layout-content'>
        <Breadcrumb>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>
            <a href='#'>Product</a>
          </Breadcrumb.Item>
          <Breadcrumb.Item>Product Detail</Breadcrumb.Item>
        </Breadcrumb>
        <div className='demo-layout-content-main'>
          <Spin size='large' spinning={loading}>
            <h2 className='demo-layout-content-main-title'>Product Tiitle</h2>
            <div className='demo-layout-content-main-detail'>
              <Row gutter={[50, 50]}>
                <Col span={24} lg={8}>
                  <Image
                    width={'100%'}
                    src='https://photo.queenshop.com.tw/01039398/01039398-h.jpg'
                  />
                </Col>
                <Col span={24} lg={16}>
                  <div className='demo-layout-content-main-detail-rate'>
                    <Rate allowHalf disabled defaultValue={4} />
                  </div>
                  <p className='demo-layout-content-main-detail-description'>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia provident ullam
                    obcaecati alias vel vitae excepturi similique dolorum itaque corrupti, deserunt
                    eligendi temporibus voluptates commodi! Sed quam aliquam in accusantium?
                  </p>
                  <h3 className='demo-layout-content-main-detail-prize'>
                    Prize: <span>13.00$</span>
                  </h3>
                  <Radio.Group options={options} />
                  <div className='demo-layout-content-main-detail-button'>
                    <Button>Buy it now</Button>
                  </div>
                </Col>
              </Row>
            </div>
          </Spin>
        </div>
      </Layout.Content>
      <Layout.Footer className='demo-layout-footer'>
        <p>Copyright © 2022. Dont know what is</p>
      </Layout.Footer>
    </Layout>
  )
}

export default App
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
@import '~antd/dist/antd.css';

.demo-layout-wrapper {
  color: white;
  .demo-layout-header {
    display: flex;
    align-items: center;
    height: 70px;
    background-color: #002140;
    .demo-layout-header-left {
      margin-right: 40px;
      .demo-layout-header-logo {
        width: 100px;
        height: 40px;
        background: #f2f2f2;
      }
    }
    .demo-layout-header-right {
      width: 100%;
      .ant-menu {
        border: 0;
        background: inherit;
        color: white;
        .ant-menu-item {
          &.ant-menu-item-selected {
            &::after {
              display: none;
            }
          }
          &.ant-menu-item-active {
            background: #419ffb;
            color: white;
          }
        }
      }
    }
  }
  .demo-layout-content {
    background-color: #f2f2f2;
    padding: 20px 50px;
    min-height: calc(100vh - 70px - 60px);
    .demo-layout-content-main {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
      .demo-layout-content-main-title {
        font-size: 24px;
        color: #444;
      }
      .demo-layout-content-main-detail {
        .demo-layout-content-main-detail-rate {
          margin-bottom: 10px;
        }
        .demo-layout-content-main-detail-description {
          color: #444;
        }
        .demo-layout-content-main-detail-prize {
          margin-bottom: 15px;
          span {
            text-decoration: underline;
          }
        }
        .demo-layout-content-main-detail-button {
          margin-top: 25px;
          .ant-btn {
            background-color: #339cff;
            color: white;
            padding: 8px 16px;
            height: auto;
            border: none;
            box-shadow: none;
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .demo-layout-footer {
    height: 60px;
    padding: 20px;
    text-align: center;
    color: white;
    background-color: #002140;
    font-size: 0.8rem;
    p {
      margin-bottom: 0;
    }
  }
}
Ant Design－使用 Button 時可能會碰到的地雷 Ant Design－客製化 Select
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×