Ant Design - Reactjs：单选按钮组

发布于 2025-01-18 17:42:48 字数 311 浏览 3 评论 0原文

我是新手，我有一个ReactJS AntD问题，该问题与无线电按钮组。是否有任何方法可以在每个广播按钮之间有更大的差距或空间？例如，页面左侧的一个广播按钮，另一侧第二。 https：//codesandbox.io/ S/Radiogroup-Antd-4-19-4-forked-134cps？从插件请忽略代码中的滑块。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦在夏天 2025-01-25 17:42:49

如果你创建了一个 css 类，那么你就可以设置你的 React 组件的样式。
以下是我在沙盒中的操作方法：

// in index.css
.radioLeft {
  right: 0%;
  position: absolute;
}

// in index.js
<Radio value={2} className='radioLeft'>2022</Radio>

这会将 2022 单选按钮放在屏幕的最右侧，与第一个单选按钮位于同一 y 维度上。您可以更改“index.css”中的“right”值来根据需要进行调整。

If you make a css class then you can style your react components.
Here's how I did it in your sandbox:

// in index.css
.radioLeft {
  right: 0%;
  position: absolute;
}

// in index.js
<Radio value={2} className='radioLeft'>2022</Radio>

This will put the 2022 radio at the very right side of the screen, on the same y-dimension as the first radio button. You can change the 'right' value in 'index.css' to adjust it as you please.

回复收藏 0 原文

无名指的心愿 2025-01-25 17:42:48

使用 ant Row 来调整内容“之间的空格”

<Radio.Group
  onChange={(e) => {
    console.log("radio checked", e.target.value);
    setcurrentValueRadio(e.target.value);
  }}
  value={currentValueRadio}
  style={{ width: "100%" }}
>
  <Row justify="space-between">
    <Radio value={1}>2021</Radio>
    <Radio value={2}>2022</Radio>
  </Row>
</Radio.Group>;

use ant Row with justify content "space-between"

<Radio.Group
  onChange={(e) => {
    console.log("radio checked", e.target.value);
    setcurrentValueRadio(e.target.value);
  }}
  value={currentValueRadio}
  style={{ width: "100%" }}
>
  <Row justify="space-between">
    <Radio value={1}>2021</Radio>
    <Radio value={2}>2022</Radio>
  </Row>
</Radio.Group>;

回复收藏 0 原文

无妨# 2025-01-25 17:42:48

使用可以使用 Antd 网格来对齐单选按钮

import { Radio, Row, Col } from "antd";

<Radio.Group
        onChange={(e) => {
          console.log("radio checked", e.target.value);
          setcurrentValueRadio(e.target.value);
        }}
        value={currentValueRadio}
        style={{ width: "100%" }}
      >   
        <Row>
          <Col span={12} align="left">
            <Radio value={1}>2021</Radio>
          </Col>
          <Col span={12} align="right">
            <Radio value={2}>2022</Radio>
          </Col>
        </Row>       
</Radio.Group>

屏幕截图：

Use can use Antd grid to align the radio buttons

import { Radio, Row, Col } from "antd";

<Radio.Group
        onChange={(e) => {
          console.log("radio checked", e.target.value);
          setcurrentValueRadio(e.target.value);
        }}
        value={currentValueRadio}
        style={{ width: "100%" }}
      >   
        <Row>
          <Col span={12} align="left">
            <Radio value={1}>2021</Radio>
          </Col>
          <Col span={12} align="right">
            <Radio value={2}>2022</Radio>
          </Col>
        </Row>       
</Radio.Group>

Screenshot: