import * as React from 'react';
import { Descriptions, Row, Col } from '@btri-ui/base';
export default () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={12}>
          <Descriptions
            bordered
            column={{ md: 1, lg: 2 }}
            layout="horizontal"
            title="水平布局"
          >
            <Descriptions.Item label="姓名：">艾丁</Descriptions.Item>
            <Descriptions.Item label="手机号：">
              128 1223 1223
            </Descriptions.Item>
            <Descriptions.Item label="邮箱：">
              12345@midea.com
            </Descriptions.Item>
            <Descriptions.Item label="籍贯：">中国</Descriptions.Item>
          </Descriptions>
        </Col>
        <br />
      </Row>
      <br />
      <Row autoMode={true}>
        <Col span={12}>
          <Descriptions
            bordered
            column={{ md: 1, lg: 2 }}
            layout="vertical"
            title="竖直布局"
          >
            <Descriptions.Item label="姓名：">艾丁</Descriptions.Item>
            <Descriptions.Item label="手机号：">
              128 1223 1223
            </Descriptions.Item>
            <Descriptions.Item label="邮箱：">
              12345@midea.com
            </Descriptions.Item>
            <Descriptions.Item label="籍贯：">中国</Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <br />
      <Row autoMode={true}>
        <Col span={12}>
          <Descriptions
            bordered
            column={{ md: 1, lg: 2 }}
            layout="inline"
            title="内部竖直布局"
          >
            <Descriptions.Item label="姓名：">艾丁</Descriptions.Item>
            <Descriptions.Item label="手机号：">
              128 1223 1223
            </Descriptions.Item>
            <Descriptions.Item label="邮箱：">
              12345@midea.com
            </Descriptions.Item>
            <Descriptions.Item label="籍贯：">中国</Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
    </>
  );
};
