Как добавить оверлей в строку таблицы пользовательского интерфейса материалов? - PullRequest
Новая
       24

Как добавить оверлей в строку таблицы пользовательского интерфейса материалов?

1 голос
/ 11 июля 2020

Я визуализирую строку, подобную этой 

`<TableRow
  key={row.name}
>
  <TableCell>{row.empId}</TableCell>
  <TableCell>{row.userId}</TableCell>
  <TableCell>{row.name}</TableCell>
  <TableCell>{row.hireDate}</TableCell>
  <TableCell>{row.terDate}</TableCell>
  <TableCell>{row.empType}</TableCell>
  <TableCell>
    <Typography variant="button" color={row.empStatus ? 'primary' : 'error'}>
      {row.empStatus ? 'Active' : 'Inactive'}
    </Typography>{' '}
  </TableCell>
  <TableCell align="right">
    <IconButton aria-label="view log" onClick={() => setOpen(true)}>
      <HistoryIcon fontSize="small" />
    </IconButton>
    <IconButton aria-label="edit">
      <EditIcon fontSize="small" />
    </IconButton>
  </TableCell>
  <div className="overley">
    <p>overlay text</p>
  </div>
</TableRow>`

, а наложение имеет CSS like 

`.overley {
    position: absolute;
    background-color: gainsboro;
    opacity: 0.5;
    width: 100%;
  }
  .tableRow {
    position: relative;
  }`

Я ожидаю чего-то вроде этого table

итак, как добавить эффект наложения или любой div, который отображается поверх строки, не влияя на ширину таблицы или строки и выравнивание.

приведенный выше код добавляет еще один столбец в конце, если я оставлю: 0 он смещается в левую часть экрана. Кто-нибудь знает, как это сделать?

1 Ответ

0 голосов
/ 04 сентября 2020

Я хотел сделать то же самое и смог сделать это, более или менее выполнив следующие действия: 

<TableRow className={'row-overlay-hover'}>
    <TableCell/>
    ...
    <TableCell/>
    <TableCell>
        <div className={'overlay-wrapper'}>
            <div className={'overlay-content'}>
                Overlay content
            </div>
        </div>
    </TableCell>
</TableRow>

.row-overlay-hover td:last-child {
    width: 0;
    padding: 0 !important;
}
.row-overlay-hover:hover .overlay-content {
    visibility: visible;
}
.overlay-wrapper {
    position: relative;
}
.overlay-content {
    visibility: hidden;
    position: absolute;
    right: 0;
}

Примечание:

...