Блог

Использование Antd React.js, Я хочу создать следующий большой селектор «мега-опции» вместо традиционного радио.Опыт работы с кнопками.

В настоящее время я могу разложить их как компоненты карты с hoverable включенной опцией (чтобы добавить тень коробки на карту при наведении). Я хотел бы связать эти «Карточки» в качестве опций Радио, чтобы они были доступны в моем состоянии Формы, как обычное радио.Опция кнопки.

Текущий «карточный» дизайн: Конечный вывод должен сохранять функцию стиля, как и в обычной опции радио.

 ```
<Form form={form} layout="vertical" name="add-form">
  <Form.Item
    name="type"
    label="Please select a type below:"
    rules={[
      {
        required: true,
        message: "Please select your type",
      },
    ]}
  >
    <Row gutter={16}>
      <Col md={12}>
        <Card
          hoverable
          title="Radio Button 1"
          extra={<CheckCircleFilled style={{ color: "#12cc55" }} />}
        >
          This is a short description of the radio button.
        </Card>
      </Col>
      <Col md={12}>
        <Card
          hoverable
          title="Radio Button 2"
        >
          This is a short description of the radio button.
        </Card>
      </Col>
    </Row>
  </Form.Item>
</Form>
```
 

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

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

вы можете сделать это легко.. используйте компонент карты внутри радиокомпонента. оформите компонент карты так, как вы хотите.
проверьте этот пример….. https://codesandbox.io/s/heuristic-mendeleev-pjcvg