@aliretail/react-materials-components/demo/CheckLogistics/usage.md

B 端物料组件库

---
title: CheckLogistics-Usage
order: 1
---

本 Demo 演示查看物流的用法。


```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { CheckLogistics } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';
import './index.scss';

const delivery = [
  {
    text: '包裹1',
    deliveryStateDesc: '已签收',
    type: '顺丰',
    deliveryCode: '3499574934',
    deliveryInfos: [
      {
        time: '2020/09/10 08:09:00',
        packageInfo: '当前包裹所在地址'
      }, {
        time: '2020/09/10 08:09:00',
        packageInfo: '当前包裹所在地址'
      }
    ]
  },
  {
    text: '包裹2',
    deliveryStateDesc: '已签收',
    type: '顺丰',
    deliveryCode: '349957493455555',
    deliveryInfos: [
      {
        time: '2020/09/10 08:09:00',
        packageInfo: '当前包裹所在地址'
      }, {
        time: '2020/09/10 08:09:00',
        packageInfo: '当前包裹所在地址'
      }
    ]
  },

]

class App extends Component {
  render() {
    return (
      <CheckLogistics
        className='balloon'
        delivery={delivery}
        triggerType='hover'
        align='rb'
        trigger={<Button type='primary' text>查看物流</Button>}
        footer={<Button type='normal'>查看详情</Button>}
      />
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
```