Реализация панели инструментов MUI Waterfall - PullRequest
Новая
       8

Реализация панели инструментов MUI Waterfall

0 голосов
/ 11 марта 2019

Я использую что-то очень похожее на это:

https://codesandbox.io/s/1op5mqq9oq

Нажмите на флажки, и появится <Toolbar />, когда вы прокрутите страницу вниз, <Toolbar /> останется наверху и исчезнет из поля зрения. Я предполагал, что это может быть панель инструментов «водопад», которая выходит из коробки, я мог ошибаться, но предполагал, что это будет класс или опора, которая может быть применена. Вот демонстрационный код:

В конечном итоге я хочу, чтобы при прокрутке панель инструментов оставалась в верхней части браузера, а затем возвращалась в исходное положение. 

<Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0,
      })}
    >
      <div className={classes.title}>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subtitle1">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="h6" id="tableTitle">
            Nutrition
          </Typography>
        )}
      </div>
      <div className={classes.spacer} />
      <div className={classes.actions}>
        {numSelected > 0 ? (
          <Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon />
            </IconButton>
          </Tooltip>
        ) : (
          <Tooltip title="Filter list">
            <IconButton aria-label="Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}
      </div>
    </Toolbar>

Существует ссылка на панель инструментов водопада в материале Дизайн - https://material.io/develop/web/components/toolbar/ Похоже, это совершенно другая реализация, которую я не хочу делать.

Кто-нибудь реализовал это?

1 Ответ

0 голосов
/ 01 апреля 2019

Мне кажется, CSS position: sticky - это то, что вы можете искать

...