Material UI je knižnica Material Design vytvorená pre React.
Je to sada komponentov React, ktoré majú štýly Material Design.
V tomto článku sa pozrieme na to, ako pridať zásuvky do používateľského rozhrania materiálu.
Citlivá zásuvka
Odozvu na zásuvku môžeme vytvoriť pridaním niektorých mediálnych dopytov, ktoré zásuvku zobrazia a skryjú.
Môžeme napríklad napísať:
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 { makeStyles, useTheme } from '@material-ui/core/styles'; const drawerWidth = 240; const useStyles = makeStyles(theme => ({ root: { display: 'flex' }, drawer: { [theme.breakpoints.up('sm')]: { width: drawerWidth, flexShrink: 0 } }, appBar: { [theme.breakpoints.up('sm')]: { width: `calc(100% - ${drawerWidth}px)`, marginLeft: drawerWidth } }, menuButton: { marginRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { display: 'none' } }, toolbar: theme.mixins.toolbar, drawerPaper: { width: drawerWidth }, content: { flexGrow: 1, padding: theme.spacing(3) } })); export default function App(props) { const { window } = props; const classes = useStyles(); const theme = useTheme(); const [mobileOpen, setMobileOpen] = React.useState(false); const handleDrawerToggle = () => { setMobileOpen(!mobileOpen); }; const drawer = ( ); const container = window !== undefined ? () => window().document.body : undefined; return ( Responsive drawer {drawer} {drawer} Lorem ipsum dolor sit amet Consequat mauris nunc congue nisi vitae suscipit. ); } #programming #software-development #javascript #web-development #technology
medium.com
Materiálové používateľské rozhranie - responzívne a trvalé zásuvky
Material UI je knižnica Material Design vytvorená pre React. Je to sada komponentov React, ktoré majú štýly Material Design. V tomto článku sa pozrieme na to, ako pridať zásuvky do používateľského rozhrania materiálu.