【问题标题】:Material design React List orientation材料设计 React List 方向
【发布时间】: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

【问题讨论】:

    标签: reactjs react-tsx react-material


    【解决方案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>
        );
    }
    

    【讨论】:

      猜你喜欢
      • 2014-11-28
      • 2020-09-21
      • 2015-06-13
      • 1970-01-01
      • 2015-02-05
      • 2015-04-17
      • 1970-01-01
      • 1970-01-01
      • 2015-05-14
      相关资源
      最近更新 更多