как настроить интервал / ширину пагинации пользовательского интерфейса для реагирующих материалов на небольших экранах - PullRequest
Новая
       80

как настроить интервал / ширину пагинации пользовательского интерфейса для реагирующих материалов на небольших экранах

0 голосов
/ 08 мая 2020

Я использую компонент разбивки на страницы пользовательского интерфейса response-material, где у меня есть параметры строк на страницу вместе с параметрами forward, backward, first_page и last_page, как показано ниже

enter image description here

Код рендеринга разбиения на страницы: 

<TablePagination
        component="div"
        rowsPerPageOptions={[10, 20, 50, 100]}
        colSpan={20}
        count={totalProducts}
        rowsPerPage={rowsPerPage}
        page={page}
        labelRowsPerPage="Rows per page"
        SelectProps={{
          inputProps: { "aria-label": "rows per page" },
          native: true
        }}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
        ActionsComponent={subProps => (
          <Pagination {...subProps} totalProducts={totalProducts} />
        )}
      />

Есть ли способ, при котором для небольших экранов я могу скрыть параметр строк на странице или переместить компонент разбивки на страницы влево. В основном делает компонент отзывчивым

Спасибо

1 Ответ

0 голосов
/ 11 мая 2020

Думаю, вам поможет простое удаление строк на странице.

Из документации для rowsPerPageOptions

Настраивает параметры строк на странице выберите поле. Если доступно менее двух опций, поле выбора отображаться не будет.

Итак, в основном, если вы пройдете rowsPerPageOptions={[]}, это должно сработать.

Вы можете использовать Скрыт для переключения между ними, как показано ниже.

Пример 

<>
  <Hidden smUp>
   <TablePagination
     rowsPerPageOptions={[]}
     component="div"
     count={rows.length}
     rowsPerPage={rowsPerPage}
     page={page}
     onChangePage={handleChangePage}
     onChangeRowsPerPage={handleChangeRowsPerPage}
   />
 </Hidden>
 <Hidden smDown>
   <TablePagination
   rowsPerPageOptions={[5, 10, 15, 20]}
   component="div"
   count={rows.length}
   rowsPerPage={rowsPerPage}
   page={page}
   onChangePage={handleChangePage}
   onChangeRowsPerPage={handleChangeRowsPerPage}
  />
 </Hidden>
</>

И таблица уже отвечает. Дай мне знать.

...