Ant Design - вертикальная группа флажков - PullRequest
Новая
       32

Ant Design - вертикальная группа флажков

0 голосов
/ 22 ноября 2018

Я пытаюсь создать столбец флажков, используя Ant design.Я пытался: 

 <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 будет встроенный метод для отображения флажков вертикально (в столбце), а не в горизонтальной строке.

Есть ли простое решение для размещения флажков по вертикали?

1 Ответ

0 голосов
/ 22 ноября 2018

Не выглядит так, как выглядит, поскольку <label> s, которые он отображает, display: inline-block.Самое простое решение (кроме переписывания компонента) - изменить атрибуты .ant-checkbox-group-item из (вы всегда можете обернуть CheckBox другим именем класса, чтобы применять его выборочно, а не глобально): 

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

to: 

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

Что заставит его выглядеть так: enter image description here

При желании вы также можете добавить атрибут display: inline-block к .ant-checkbox-group's Стили.

, которые затем заставят это выглядеть так: enter image description here

Другое решение состоит в том, чтобы создать некоторые повторно используемые компоненты и применить вышеупомянутое черезсвойство style (по общему признанию, это не элегантное решение, поскольку функция CheckboxGroup onChange ожидает обработки options, но вам придется перехватить их, чтобы изменить свойство стиля Checkbox).

Рабочий пример: https://codesandbox.io/s/w0voxxxzm5

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

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

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