材料设计 React List 方向

Posted 2023-02-22

【中文标题】材料设计 React List 方向

【英文标题】：Material design React List orientation

【发布时间】：2020-09-02 12:39:26

【问题描述】：

使用MDC反应列表，试图改变方向，但不工作总是垂直显示列表。

import List,  ListItem  from '@material/react-list';
import '@material/react-list/dist/list.css';

<List orientation="horizontal">
      <ListItem>
        test
      </ListItem>
      <ListItem>
        test
      </ListItem>
      <ListItem>
        test
      </ListItem>
    </List>

来自文档

https://github.com/material-components/material-components-web-react/tree/master/packages/list

【参考方案1】：

您可以在 div 容器中使用显示样式作为 flex。 flex-direction 样式表示 div 下面的元素显示在一行或一列中。行表示它是水平的，列表示它是垂直的。我不确定，但是如果这不起作用，您可以将 div 的样式添加到 List 中。

这是代码：

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

export default function App() 
    return (
        <div style=display: 'flex', flex-direction: 'row'>
            <List>
                <ListItem>
                    <ListItemText>Text 1</ListItemText>
                </ListItem>

                <ListItem>
                    <ListItemText>Text 2</ListItemText>
                </ListItem>

                <ListItem>
                    <ListItemText>Text 3</ListItemText>
                </ListItem>
            </List>
        </div>
    );