--- order: 3 title: zh-CN: 竖排列表样式 en-US: Vertical --- ## zh-CN 通过设置 `itemLayout` 属性为 `vertical` 可实现竖排列表样式。 ## en-US Set the `itemLayout` property to `vertical` to create a vertical list. ```jsx import { List, Avatar, Space } from 'antd'; import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons'; const listData = []; for (let i = 0; i < 23; i++) { listData.push({ href: 'https://ant.design', title: `ant design part ${i}`, avatar: 'https://joeschmoe.io/api/v1/random', description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.', content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', }); } const IconText = ({ icon, text }) => ( {React.createElement(icon)} {text} ); ReactDOM.render( { console.log(page); }, pageSize: 3, }} dataSource={listData} footer={
ant design footer part
} renderItem={item => ( , , , ]} extra={ logo } > } title={{item.title}} description={item.description} /> {item.content} )} />, mountNode, ); ```