Блог

Мне интересно, есть ли возможность добавить фиксированный элемент меню в меню? Я хотел бы использовать один из элементов меню для отображения заголовка. Также, если есть другие решения, я тоже готов их попробовать.

Вот структура:

 <Menu>
    <MenuItem className={classes.header}>This is header</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
</Menu>
 

Я попытался установить положение заголовка MenuItem в фиксированное, но оно выводит все меню в верхнюю часть страницы.

 header: {
   position: 'fixed',
},
 

РЕДАКТИРОВАТЬ: чтобы немного прояснить, что я ищу. У GitHub такое же меню:

Вы можете использовать position sticky , но вам также нужно будет «настроить» z-index из-за этой проблемы:

итак, вы можете сделать что-то подобное (на основе примера пользовательского интерфейса material):

 import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
import MoreVertIcon from "@material-ui/icons/MoreVert";

import { Paper, TextField } from "@material-ui/core";
const useStyles = makeStyles({
  header: {
    position: "sticky",
    top: 0,
    backgroundColor: "white",
     zIndex: 2
  },
  search: {
    marginBottom: "5px",
    
  },
  card: {
    width: "100%"
  }
});

const options = [
  "None",
  "Atria",
  "Callisto",
  "Dione",
  "Ganymede",
  "Hangouts Call",
  "Luna",
  "Oberon",
  "Phobos",
  "Pyxis",
  "Sedna",
  "Titania",
  "Triton",
  "Umbriel"
];

const ITEM_HEIGHT = 48;

export default function LongMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const classes = useStyles();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        elevation={1}
        className={classes.menu}
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        PaperProps={{
          style: {
            maxHeight: ITEM_HEIGHT * 4.5,
            width: "800px",
            backgroundColor: "white"
          }
        }}
      >
        <div className={classes.header}>
          <Paper className={classes.card} elevation={3}>
            <TextField
              className={classes.search}
              label={"search filter"}
              variant={"outlined"}
            ></TextField>
          </Paper>
        </div>
        {options.map((option) => (
          <MenuItem
            key={option}
            selected={option === "Pyxis"}
            onClick={handleClose}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

 

вот ссылка на песочницу
это результат после добавления z-индекса: