我使用基于Material-UI示例的响应式抽屉创建了一个Web应用程序。
我正在尝试使表格根据屏幕宽度进行自适应调整,但由于Material-UI提供的ResponsiveDrawer
容器破坏了内容(即表格)的响应性,因此未能实现。
这是我的一个示例,它完全具备响应性:
App.js
import React from "react";
import ReactDOM from "react-dom";
import Table from "@material-ui/core/Table/Table";
import TableHead from "@material-ui/core/TableHead/TableHead";
import TableRow from "@material-ui/core/TableRow/TableRow";
import TableCell from "@material-ui/core/TableCell/TableCell";
import TableBody from "@material-ui/core/TableBody/TableBody";
import Paper from "@material-ui/core/Paper/Paper";
import Grid from "@material-ui/core/Grid/Grid";
import "./styles.css";
function App() {
return (
<div className="App">
<Grid container justify={"center"}>
<Grid item xs={12} md={10} style={{ padding: "8px" }}>
<Paper style={{ overflowX: "auto" }}>
<Table style={{ minWidth: "340px" }}>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Column</TableCell>
<TableCell>Operating System</TableCell>
<TableCell>Status</TableCell>
<TableCell>CPU Cores</TableCell>
<TableCell>Memory (MB)</TableCell>
<TableCell>IP Address</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
</TableRow>
<TableRow>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</Grid>
</Grid>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
这里是同一个例子(链接),但使用了修改后的(将内容更改为this.props.children
而不是静态内容)Material-UI的ResponsiveDrawer
版本。
ResponsiveDrawer.js
import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
const drawerWidth = 240;
const styles = theme => ({
root: {
display: "flex"
},
drawer: {
[theme.breakpoints.up("sm")]: {
width: drawerWidth,
flexShrink: 0
}
},
appBar: {
marginLeft: drawerWidth,
[theme.breakpoints.up("sm")]: {
width: `calc(100% - ${drawerWidth}px)`
}
},
menuButton: {
marginRight: 20,
[theme.breakpoints.up("sm")]: {
display: "none"
}
},
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3
}
});
class ResponsiveDrawer extends React.Component {
state = {
mobileOpen: false
};
handleDrawerToggle = () => {
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
};
render() {
const { classes, theme } = this.props;
const drawer = (
<div>
<div className={classes.toolbar} />
<Divider />
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Responsive drawer
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
anchor={theme.direction === "rtl" ? "right" : "left"}
open={this.state.mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{this.props.children}
</main>
</div>
);
}
}
ResponsiveDrawer.propTypes = {
classes: PropTypes.object.isRequired,
// Injected by the documentation to work in an iframe.
// You won't need it on your project.
container: PropTypes.object,
theme: PropTypes.object.isRequired
};
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
App.js
import React from "react";
import ReactDOM from "react-dom";
import Table from "@material-ui/core/Table/Table";
import TableHead from "@material-ui/core/TableHead/TableHead";
import TableRow from "@material-ui/core/TableRow/TableRow";
import TableCell from "@material-ui/core/TableCell/TableCell";
import TableBody from "@material-ui/core/TableBody/TableBody";
import Paper from "@material-ui/core/Paper/Paper";
import ResponsiveDrawer from "./ResponsiveDrawer";
import Grid from "@material-ui/core/Grid/Grid";
import "./styles.css";
function App() {
return (
<div className="App">
<ResponsiveDrawer>
<Grid container justify={"center"}>
<Grid item xs={12} md={10} style={{ padding: "8px" }}>
<Paper style={{ overflowX: "auto" }}>
<Table style={{ minWidth: "340px" }}>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Column</TableCell>
<TableCell>Operating System</TableCell>
<TableCell>Status</TableCell>
<TableCell>CPU Cores</TableCell>
<TableCell>Memory (MB)</TableCell>
<TableCell>IP Address</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
</TableRow>
<TableRow>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
<TableCell>Content</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</Grid>
</Grid>
</ResponsiveDrawer>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我似乎无法弄清楚导致响应性出现问题的
ResponsiveDrawer
容器内部是什么。感谢任何帮助。更新(2019年1月7日):看起来从根中删除
display: flex
可以解决问题,但这样就会出现不遵守左抽屉的问题。更新(2019年1月9日):如@Gaurav Rana所建议的,我已经添加
width: 100%;
到主元素,并且已经解决了一半的问题。现在,当侧边栏不可见时,表格将正常溢出/滚动。但是,当侧边栏仍然可见但屏幕不够宽以显示整个表格时,表格会在侧边栏下方滚动。