reactjs Material design React List定向

8qgya5xd  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(232)

使用MDCReact列表,试图改变方向,但不工作总是显示垂直列表。

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

46qrfjad

46qrfjad1#

你可以在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>
    );
}

相关问题