Question

材料界面FlexBox基本项目的排列方式，nowrap，在同一行中左右对齐

我从材料UI开始，该库非常有用。但是样式有时很棘手。现在需要在列表项中安排一些控件。当然，可以通过一些div嵌套和Flex显示来做到这一点。但是我只想使用Material-UI元素。

使用伪代码：

<List maxWidth=450 >
<ListItem >
<IconButton align=left>< IconButton align=left> < text grow align=left > < IconButton align=right>< IconButton align=right>
<ExpansionPanel Number1, with full width and expand vertical> 
<ExpansionPanel Number2, with full width and expand vertical> 
</ListItem>
.
.
.
</List>

蓝色绿色区域中的控件，不必包装。如果使用省略号（...），则溢出时，文本内容不得换行和隐藏。文本对象的宽度必须增大以填充按钮之间的剩余空间。右控件（绿色区域）的垂直对齐必须是基线或中心。在所附的图片中，浅蓝色区域是列表宽度，仅第一项显示的部分良好，其他项不尊重其属性。

谁能给我一些建议。

import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Paper, Typography } from "@material-ui/core";

import Box from '@material-ui/core/Box';


import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';

import Checkbox from '@material-ui/core/Checkbox';
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import Switch from '@material-ui/core/Switch';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

import LinearScaleIcon from '@material-ui/icons/LinearScale';
import ViewModuleIcon from '@material-ui/icons/ViewModule';
import DashboardIcon from '@material-ui/icons/Dashboard';
import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';

import WbSunnyIcon from '@material-ui/icons/WbSunny';
import BrightnessLowIcon from '@material-ui/icons/BrightnessLow';
import EqualizerIcon from '@material-ui/icons/Equalizer';


import { red, blue, green } from '@material-ui/core/colors';


const text = [

 { date : "2019.09.10",name: "layer", source : "S 1"}, 
 { date : "2019.10.21",name: "Consectetur adipiscing", source : "Source 2"}, 
 { date : "2019.09.10",name: "Suspendisse malesuada lacus ex", source : "Source 51"}
]






const cssStyles = makeStyles(theme => ({SelectIcon: {transform: "scale(1.5)"}}));

function BoxTest(props) {

 const classes = cssStyles();

  const showIcon = (value) => {
      switch(value) {
    case 0:
      return <LinearScaleIcon/>;
    case 1:
      return <ViewModuleIcon/>;
    case 2:
      return <DashboardIcon/>;
    case 3:
      return <ViewQuiltIcon/>;
    
    default:
      return value;
  }
  };
  
  return (    


      <List dense style={{ backgroundColor: "lightblue" , maxWidth: "450px" , padding:"0px", margin:"0px"}} >

        {text.map(item => (

          <ListItem   >

            <Box display="flex" flexDirection="column" >
               <Box display="flex" flexDirection="row"  alignContent="flex-start"  >

                <Box flexDirection="row" flexWrap="nowrap" bgcolor="blue"  >
                    <Checkbox />
                    <Switch  />                                            
                </Box>

                <Box flexGrow={1} flexWrap="nowrap" alignItems="center"  bgcolor="grey.500" >
                   <Typography variant="body1" noWrap display="inline" style={{maxWidth : "200"}} >
                   {item.date +" "+ item.name +", "+ item.source}                     
                    </Typography>
                </Box>

                <Box flexWrap="nowrap" alignItems="center"  bgcolor="green" >

                    <Select value={3} classes={{ icon: classes.grdSelectIcon}} 
                      onChange={(e) => { console.log( e.target.value); }}                          
                      renderValue={ showIcon }  >          
                      <MenuItem value={0}><LinearScaleIcon/> Proportional</MenuItem>
                      <MenuItem value={1}><LinearScaleIcon/> Interval 3</MenuItem>
                      <MenuItem value={2}><LinearScaleIcon/> Interval 4</MenuItem>
                      <MenuItem value={3}><ViewModuleIcon/> Quartil </MenuItem>
                      <MenuItem value={4}><DashboardIcon/>  Quintil</MenuItem>
                      <MenuItem value={5}><ViewQuiltIcon/>  Std. Desviation</MenuItem>          
                      <MenuItem value={6}><ViewQuiltIcon/>  IQR</MenuItem>       
                    </Select>   

                    <IconButton size="small" ><EqualizerIcon /></IconButton>                               
                    <IconButton size="small" ><WbSunnyIcon   /></IconButton>
                </Box>
               
            </Box>
            <Box>
                <ExpansionPanel> 
                 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                      <Typography >Expansion Panel 1</Typography>
                </ExpansionPanelSummary>          
                <ExpansionPanelDetails>
                  <Typography>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                    sit amet blandit leo lobortis eget.
                  </Typography>
                </ExpansionPanelDetails>
              </ExpansionPanel>

            </Box>
            <Box>
                <ExpansionPanel> 
                 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} >
                      <Typography >Expansion Panel 2</Typography>
                </ExpansionPanelSummary>          
                <ExpansionPanelDetails>
                  <Typography>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                    sit amet blandit leo lobortis eget.
                  </Typography>
                </ExpansionPanelDetails>
              </ExpansionPanel>

            </Box>
          </Box>

          </ListItem>
              
              
            

        ))}

         </List>
    
  );
}


const rootElement = document.getElementById("react");
ReactDOM.render(<BoxTest/>,  rootElement);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

问候

材质UI FlexBox基本项目的排列方式，nowrap，在同一行中左右对齐

0 个答案: