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

下面以Matt Carlotta示例为例，如果您使用样式化组件的变体，则可以使用

export const ColumnCheckbox = styled(Checkbox.Group)`
.ant-checkbox-group-item {
    display: block;
    margin-right: 0;
}
` 
<ColumnCheckbox options={['Hello','Hello1','Hello2']}/>

Answer 2

由于它呈现的<label>是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的{{1}}函数希望处理{{1 }}，但是您必须拦截它们才能更改onChange的style属性。

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

Checkbox.js

options

CheckboxGroup.js

Checkbox

Form.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>
);

Answer 3

render() {
    return (
      <EnhanceSubContent title={TITLE}>
        <Alert
          className={styles.alertMargin}
          message="Select the Events below to receive notification."
          type="info"
          showIcon
        />
        <div className={styles.content}>
          <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
            <Row>
              <Col span={12}>
                <Space direction="vertical">
                  <Checkbox value="Link Up">Link Up</Checkbox>
                  <Checkbox value="Link Down">Link Down</Checkbox>
                  <Checkbox value="Power On">Power On</Checkbox>
                  <Checkbox value="Power Off">Power Off</Checkbox>
                  <Checkbox value="Cold Start">Cold Start</Checkbox>
                  <Checkbox value="Warm Start">Warm Start</Checkbox>
                  <Checkbox value="Port Link Up">Port Link Up</Checkbox>
                </Space>
              </Col>
              <Col span={12}>
                <Space direction="vertical">
                  <Checkbox value="Port Link Down">Port Link Down</Checkbox>
                  <Checkbox value="Authentication Failure">
                    Authentication Failure
                  </Checkbox>
                  <Checkbox value="Power1 ok">Power1 ok</Checkbox>
                  <Checkbox value="Power1 failure">Power1 failure</Checkbox>
                  <Checkbox value="Power2 ok">Power2 ok</Checkbox>
                  <Checkbox value="Power2 failure">Power2 failure</Checkbox>
                </Space>
              </Col>
            </Row>
          </Checkbox.Group>
          <Divider />
        </div>
        <div className={styles.buttonsContianer}>
          <Space align="end">
            <Button type="primary"> Apply </Button>
            <Button className={styles.cancelButton}> Reset </Button>
          </Space>
        </div>
      </EnhanceSubContent>
    );
  }
}

Answer 4

或者您可以使用 styled-components，这样您就不会全局更改 .ant-checkbox-group-item 样式。

import { Checkbox } from 'antd';
import styled from 'styled-components'

const VerticalCheckboxGroup = styled(Checkbox.Group)`
  .ant-checkbox-group-item {
    display: block!important;
  }
`

Answer 5

不确定这是否总是有效（因为问题是 2 年前的问题），但是可以通过将每个复选框简单地包裹在一个 <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>

内容按预期呈现：

Answer 6

你可以这样做，而且item里面的内容也是对齐右对齐的！

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

蚂蚁设计-垂直复选框组

6 个答案: