antd 简单布局和按钮

主思路

Grid栅格控制布局，设定Button按钮

详情

需要在UI上放几个按钮，读了一下antd文档和试验了一下，感觉还是很方便的。

antd 里的布局还是比较简单，就是使用Grid栅格。

Grid 栅格就是行列格式，主要使用Row, Col这两个控件，一行有24栅格。

如果中间需要有间隔就参考：栅格 Grid - Ant Design

antd 里的按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮，配合栅格可以把按钮放在正确的地方。另外还可以控制大小，形状（方，圆角，圆），图标。

例子

        <Row gutter={16}>
          <Col className="gutter-row" span={10}>
            <Input.Search
              placeholder={intl.formatMessage({ id: 'pages.searchHolder' })}
              enterButton={intl.formatMessage({ id: 'pages.searchButton' })}
              size="large"
              onSearch={handleFormSubmit}
              style={{ width: '100%' }}
            />
          </Col>
          <Col className="gutter-row" offset={10} span={4}>
            <Button size="large" type="primary">
              {intl.formatMessage({ id: 'pages.button.newLead' })}
            </Button>
          </Col>
        </Row>

参考

栅格 Grid - Ant Design

按钮 Button - Ant Design