Блог

Главная - Вопросы по программированию - Как я могу убедиться, что метка переключателя соответствует фактическому элементу управления

Как я могу убедиться, что метка переключателя соответствует фактическому элементу управления

#material-ui

Вопрос:

У меня есть компонент, который открывает/закрывает таблицу пользовательского интерфейса материала. Я использую переключатель для открытия/закрытия этого компонента. Это в значительной степени работает именно так, как я хочу. У меня есть небольшая эстетическая проблема с размещением текста «Скрыть/Показать». Верхняя часть текста совпадает с горизонтальным центром элемента управления переключателем.

Вот код переключателя.

 <FormControlLabel
    className={classes.switch}
    control={<Switch checked={show} onChange={handleChangeShow} />}
    label={show ? "Hide" : "Show"}
  />

Обратите внимание, что метка «Показать/Скрыть» не совпадает с самим переключателем. Это слишком низко. Как я могу это исправить?

введите описание изображения здесь

Вот функция создания стилей.

 const useStyles = makeStyles((theme) => ({
  root: {
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(1),
    flexDirection: "column",
    display: 'flex'
  },
  container: {
    width: (props) => (props.show ? "inherit" : "0px"),
    height: (props) => (props.show ? "inherit" : "0px")
  },
  switch: {
    justifyContent: "flex-end",
    alignItems: "flex-end"
  },
}

Вот код оболочки:

 return (
    <div className={classes.root}>
      <Typography>{title}</Typography>
      <div className={classes.container}>
        <Fade in={show}>
          <Paper className={classes.paper}>{frames_view}</Paper>
        </Fade>
      </div>
      <FormControlLabel
        className={classes.switch}
        control={<Switch checked={show} onChange={handleChangeShow} />}
        label={show ? "Hide" : "Show"}
      />
    </div>

Ответ №1:

Хорошо.. Похоже, это было решено путем упаковки в группу форм:

   <FormGroup
    className={classes.switch}
    row
  >
    <FormControlLabel
      control={<Switch checked={show} onChange={handleChangeShow} />}
      label={show ? "Hide" : "Show"}
    />
  </FormGroup>
Метки: ,