React Select 多行标签
React Select multiline labels
有没有一种方法可以使用 react-select 来制作多行标签,或者可以为一个选项制作两个标签?
我传递了带有值和标签的 select 组件选项
value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert
Today's Date Here"
我试过插入一个换行符,但文本在 select 输入中仍保留在一行中。我正在寻找一种解决方案,每个选项都有两行。
您可以保留 \n
换行符并在标签中添加 white-space: pre-wrap
:
.Select-value-label, .Select-option {
white-space: pre-wrap;
}
使用\n
作为换行符并执行以下操作:
JSX
添加 classNamePrefix
以便 react-select 元素可以使用 类 样式:
<Select
options={...}
classNamePrefix="lp-copy-sel"
...
/>
CSS
.lp-copy-sel__option, .lp-copy-sel__single-value{
white-space: pre-wrap !important;
}
.lp-copy-sel__value-container {
height:5em;
}
附加信息
您可以添加 menuIsOpen
以便能够检查各种元素及其 类。
<Select
options={...}
classNamePrefix="lp-copy-sel"
menuIsOpen
...
/>
有没有一种方法可以使用 react-select 来制作多行标签,或者可以为一个选项制作两个标签?
我传递了带有值和标签的 select 组件选项
value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert
Today's Date Here"
我试过插入一个换行符,但文本在 select 输入中仍保留在一行中。我正在寻找一种解决方案,每个选项都有两行。
您可以保留 \n
换行符并在标签中添加 white-space: pre-wrap
:
.Select-value-label, .Select-option {
white-space: pre-wrap;
}
使用\n
作为换行符并执行以下操作:
JSX
添加 classNamePrefix
以便 react-select 元素可以使用 类 样式:
<Select
options={...}
classNamePrefix="lp-copy-sel"
...
/>
CSS
.lp-copy-sel__option, .lp-copy-sel__single-value{
white-space: pre-wrap !important;
}
.lp-copy-sel__value-container {
height:5em;
}
附加信息
您可以添加 menuIsOpen
以便能够检查各种元素及其 类。
<Select
options={...}
classNamePrefix="lp-copy-sel"
menuIsOpen
...
/>