0
点赞
收藏
分享

微信扫一扫

antd 简单布局和按钮

龙毓七七 2022-04-04 阅读 54
reactjs

主思路

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

举报

相关推荐

0 条评论