阵营选择自动尺寸宽度
当使用react-select
它是由选项值不自动调整大小,但使用width:100%
你可以在图片中看到:阵营选择自动尺寸宽度
选项有短:
getOptions() {
return [
{ value: 'AND', label: 'AND' },
{ value: 'OR', label: 'OR' }
]
}
和产生它的代码:
<Select
options={this.getOptions()}
value={value}
autosize={true}
clearable={false}
simpleValue
/>
是否有任何方法可以使react-select
显示这些值与自动调整大小,所以选择框将与选项长度相同,我可以,例如,在<div>
中居中选择框?
更新2017年11月14日 完整的示例可以在此jsFiddle
方案可以看出1
您可以利用通过更新作出反应的inline styles
根据所选择的选项的长度组件的width
。
让我进一步解释一下:说选定的值是HelloWorld
。该字符串的长度为10
。我们可以猜测,每个角色平均每个角色的说明都是8px
(总猜测我根本没有线索)。因此,这个单词的宽度大约是8*10=80px
,对吧?此外,还有一些控制字(卡尔特和十字)后面,我们需要一些最小填充:它们可能在一起宽度为100px
。然后在这里你有它:你的div的宽度应该是(8px * 10 letters) + 100px = 180px
。
更确切地说,正确的公式是这样的:
(average_letter_size * selected_value.length) + other_elements_sizes
当selected_value
变化,所以做它length
,因此div的宽度获取与新的总更新。
示例:如果所选值现在为Lorem Ipsum dolor sit amet
,则长度现在为26
。通过应用公式,我们得到更大的宽度:(8px * 26 letters) + 100px = 308px
。
对于这项工作的反应,这里是一个片段:
<Select
style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
className="select-custom-class"
name="form-field-name"
value={this.state.selectedOption2}
options={options2}
onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
/>
正如你可以看到我说:
style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
到您的组件。每当状态得到更新时,一切都会传播,包括组件的宽度。
查看此fiddle中的一个工作示例。
最终,您想调整规则和平均值以满足您的需求。我还建议您根据所选值中的大小写字母数量来应用字母大小。
SOLUTION 2(编辑)
我,如果你想用一个纯CSS的解决方案上来。它应该是对你的设计更好的测试,但这应该工作:
// .Select-value comes with an absolute position to stack it below .Select-input
// we need to scratch that in order for us to be able to let the div grow depending on its content size
.Select-placeholder, .Select--single > .Select-control .Select-value {
position: relative;
padding-left: 0;
}
// All these 3 classes come with ugly "table" display...
.Select-control, .Select-clear-zone, .Select-arrow-zone {
display: inherit;
}
// here is the trick: we display the wrapper as flex in order to make it fit in height
// we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right
.select-custom-class .Select-multi-value-wrapper {
display: flex;
flex-direction: row-reverse;
}
// we put our controls back to a better center position
.Select-clear-zone {
position: absolute;
top: 8px;
right: 20px;
}
.Select-arrow-zone {
position: absolute;
top: 8px;
right: 0px;
}
看到一个工作fiddle(我改变了一些例子为了更好地说明)
告诉我你的想法。 :)
感谢您的答案和工作示例。它似乎工作,但我注意到,“SECONDONE”(选项2)存在问题。我有选择字段与动态选项(他们可以是短期或长期),我需要的解决方案,将适用于所有情况。有没有其他的方法来实现它,或者只能通过调整字母大小/大小写设置? – Orbitum
@Orbitum微调字母大小可以改善用户体验。否则,我编辑我的答案,包括一个纯粹的CSS解决方案。我没有严格测试它,告诉我它是否更适合您的需求。 –
CSS解决方案也很棒,但是同样存在“SECONDONE”(options2)的问题。你可以请,检查它,所以我可以接受你的答案? – Orbitum