以列方式显示多值标签

Question

在下图中，我想让我的多值 Select 组件的标签以列的方式在彼此下方。

<Select
    closeMenuOnSelect={false}
    components={makeAnimated()}
    options={optionsIngameMode}
    defaultValue={optionsIngameMode}
    noOptionsMessage={() => "No game modes selected"}
    isMulti
    autoFocus
/>

我怎样才能做到这一点？

Answer 1

这可以通过将 multiValue 宽度设置为 100% 来填充所有容器 space

来轻松完成

const customStyles = {
  multiValue: (provided) => ({
    ...provided,
    width: "100%"
  }),
  multiValueLabel: (provided) => ({
    ...provided,
    marginRight: "auto", // push the delete icon to the far right
  }),
  input: (provided) => ({
    ...provided,
    display: "none"
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: 30
  }),
};

export default () => (
  <Select isMulti styles={customStyles} options={colourOptions} />
);

以列方式显示多值标签

Show MultiValueLabels in a columnwise fashion

multivalue

reactjs

react-select

jss

现场演示