import * as React from 'react';
import { Descriptions, Row, Col } from '@btri-ui/base';

export default () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={8}>
          <Descriptions labelPosition={'left'} 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>

        <Col span={8}>
          <Descriptions labelWidth={60} labelPosition={'right'} 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>

        <Col span={8}>
          <Descriptions 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>
    </>
  );
};