ant-design/components/list/demo/meta.md
niko bceb15c4e6 List:add infinite & detail optimize (#7445)
* List:add infinite & detail optimize

* React.children.map -> context

* update snapshots & demo order

* remove Item.Action _id

* update List demo

* List:add infinite & detail optimize

* React.children.map -> context

* 更新 snap

* update snapshots
2017-09-06 15:53:25 +08:00

1.6 KiB

order title
1
zh-CN en-US
带有头像和描述的列表 List with avatar and description.

zh-CN

带有头像和描述的列表。

en-US

List with avatar and description.

import { List, Avatar } from 'antd';

ReactDOM.render(
  <List
    itemLayout="horizontal"
  >
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
        title={<a href="https://ant.design">Ant design</a>}
        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
      />
    </List.Item>
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
        title={<a href="https://ant.design">Ant design</a>}
        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
      />
    </List.Item>
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
        title={<a href="https://ant.design">Ant design</a>}
        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
      />
    </List.Item>
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
        title={<a href="https://ant.design">Ant design</a>}
        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
      />
    </List.Item>
  </List>
, mountNode);