Ant Design - 复选框的垂直组

Question

我正在尝试使用 Ant 设计制作一列复选框。我试过了：

 <Checkbox.Group>
          <Checkbox>Hello</Checkbox>
          <Checkbox>Hello1</Checkbox>
          <Checkbox>Hello2</Checkbox>
</Checkbox.Group>

和：

<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />

但是，似乎没有使复选框出现在列而不是行中的选项。我知道我可以使用 flexbox，但我希望 Ant 设计有一个内置的方法来使复选框垂直显示（在列中）而不是出现在水平行中。

是否有垂直堆叠复选框的简单解决方案？

Answer 1

看起来不像，因为<label>它呈现的s 是display: inline-block. 最简单的解决方案（除了重写组件）是更改.ant-checkbox-group-item的属性（您始终可以CheckBox用另一个类名包裹以选择性地应用，而不是全局应用）：

.ant-checkbox-group-item {
    display: inline-block;
    margin-right: 8px;
}

到：

.ant-checkbox-group-item {
    display: block;
    margin-right: 0;
}

这将使它看起来像这样：

或者，您还可以display: inline-block向.ant-checkbox-group的样式添加属性。

这将使它看起来像这样：

另一个解决方案是创建一些可重用的组件并通过style属性应用上述内容（诚​​然，这不是一个优雅的解决方案，因为CheckboxGroup的onChange函数期望处理options，但您必须拦截它们以更改Checkbox的样式属性）。

工作示例：https : //codesandbox.io/s/w0voxxxzm5

复选框.js

import React from "react";
import { Checkbox } from "antd";

export default ({ disabled, label, value, handleChange }) => (
  <Checkbox
    style={{ display: "block", marginLeft: 0 }}
    disabled={disabled || false}
    label={label}
    checked={value}
    onChange={handleChange}
  >
    {label}
  </Checkbox>
);

复选框组.js

import React from "react";
import Checkbox from "./Checkbox";

export default ({ options, ...props }) => (
  <div
    className="ant-checkbox-group"
    style={{ display: "inline-block", marginRight: 10 }}
  >
    {options.map(label => (
      <Checkbox
        key={label}
        label={label}
        disabled={props.disabled}
        handleChange={props.handleChange}
        value={props[label]}
      />
    ))}
  </div>
);

表单.js

import React, { Component } from "react";
import CheckboxGroup from "./CheckboxGroup";

const options1 = ["Apple", "Pear", "Orange"];
const options2 = ["Strawberry", "Grape", "Mango"];
const options3 = ["Kiwi", "Banana", "Cherry"];

export default class Form extends Component {
  state = {};

  handleChange = ({ target: { label, checked } }) =>
    this.setState({ [label]: checked });

  handleSubmit = e => {
    e.preventDefault();

    alert(JSON.stringify(this.state, null, 4));
  };

  render = () => (
    <form onSubmit={this.handleSubmit}>
      <CheckboxGroup
        {...this.state}
        options={options1}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options2}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options3}
        handleChange={this.handleChange}
        disabled
      />
      <div style={{ marginTop: 20 }}>
        <button className="ant-btn ant-btn-primary" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

Answer 2

你可以这样做，item中的内容也对齐并右\xef\xbc\x81

\n

   .ant-checkbox-group {\n      display: flex;\n      flex-direction: column;\n    }\n

\n

Answer 3

不确定这是否总是有效（因为这个问题已经有两年了），但是可以通过简单地将每个复选框包装在一个组件中来垂直排列一组内的复选框，而无需调整样式<Row>：

import { Checkbox, Row, Form } from 'antd';

function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}

const GoodFruitForm = () =>
  <Form>
    <Form.Item label="Good Fruit">
      <Checkbox.Group onChange={onChange}>
        <Row><Checkbox value='Apple'>Apple</Checkbox></Row>
        <Row><Checkbox value='Pear'>Pear</Checkbox></Row>
      </Checkbox.Group>
    </Form.Item>
  </Form>

内容按预期呈现：