Радиокнопка с меткой выровнять по вертикали - PullRequest
Новая
       21

Радиокнопка с меткой выровнять по вертикали

0 голосов
/ 18 июня 2020

Я пытаюсь создать переключатель, в этом коде я не могу правильно выполнить вертикальное выравнивание метки, я думаю, это потому, что мне что-то не хватает в абсолютной и относительной части , попробовал выровнять по вертикали, но не сработало.

Есть ли лучший способ сделать это с помощью flex?

Если я использую flex, я не могу правильно назначить небольшой круг внутри ввод.

1 Ответ

1 голос
/ 18 июня 2020

Полагаю, вы пытаетесь разместить метку справа от переключателя.

Похоже, вы пытаетесь использовать flexbox, поэтому я отвечу, используя его.

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

return (
  <Label htmlFor={id} disabled={disabled}>
    <Input
      id={id}
      type="radio"
      role="radio"
      name={name}
      value={value}
      disabled={disabled}
      onChange={onChange}
      checked={checked}
    />
    <Indicator />
    {label} // <----
  </Label>
);

Затем вы можете использовать flexbox для Label: 

const Label = styled.label`
  display: flex;       // <----
  align-items: center; // <----
  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
  font-size: 24px;
`;

Наконец, вы необходимо сделать Indicator относительное положение: 

const Indicator = styled.div`
  border: 1px solid;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: relative; // <---

  ${Label}:hover & {
    background: #ccc;
  }
...