4

我以文档为例做了一个选择控件。但是，按钮会根据所选项目的文本宽度更改其宽度。这会使控件跳来跳去，并不是一个好的 UI 设计。

第一的

第二

有没有办法指定使用fill或使按钮为固定宽度？虽然我在设置固定宽度方面取得了部分成功，但渲染的控件很难看，文本和箭头都居中，如下所示：

固定宽度，但内容居中

相反，我想要的是：

固定宽度，正确对齐的内容

如何使用 blueprintjs 创建它？

因为有人会要求 SSCCE，这正是我使用的：https ://blueprintjs.com/docs/#select/select-component

编辑：

我已经能够得到我想要的结果，但似乎库本身应该处理这个问题，而不是诉诸一系列 CSS hack。以下 CSS 更改会产生所需的输出，但我仍然希望得到更好的答案。

.selectButton,
.selectButton > span,
.selectButton > span > div,
.selectButton > span > div > button {
    width: 100%;
}

.selectButton > span > div > button {
    display: inline;
}

.selectButton span.bp3-icon-caret-down {
    float: right;
}
4

2 回答 2

1

有一个关于这个的github问题。

全屏宽度

您应该使用该alignText属性来对齐文本和图标。前任 ：

 <Select className="fullwidth" items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
 </Select>

您必须添加自定义 CSS 规则以使选择全宽：

.bp3-popover-wrapper.fullwidth, .bp3-popover-wrapper.fullwidth > .bp3-popover-target {
   display:block;
}

但是，如果单击选择，列表将不会全宽显示。如果您有一个基本用例，您可能希望使用HTMLSelect而不是Select，当“填充”为真时，它具有所需的默认行为。

固定宽度

如果要使选择和列表固定宽度，您有 2 个解决方案：

<Select className="fullwidth" popoverProps={{ portalClassName:"fullwidth" }} items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
</Select>

<Select className="fullwidth" popoverProps={{ usePortal: false }} items={['toto', 'tata']} filterable={false} itemRenderer={renderSelectItem} onItemSelect={this.onCategoryChange.bind(this)} >
    <Button text={this.state.category} alignText="left" fill="{true}" rightIcon="caret-down" />
</Select>

.bp3-popover-wrapper.fullwidth, .bp3-popover-wrapper.fullwidth > .bp3-popover-target {
   display:block;
   max-width: 500px;
}

/* with portal */
.bp3-overlay.fullwidth .bp3-select-popover {
   width: 500px;
}

/* without portal */
.bp3-popover-wrapper.fullwidth .bp3-select-popover {
   width: 500px;
}
于 2019-06-24T09:18:30.707 回答
-1

如果按钮的容器是 100%，这应该可以工作。只需添加一些额外的选择器，这样它就不会在全局范围内影响您的应用程序。

.bp3-button {
  width: 100%;
}

.bp3-button-text {
  flex-grow: 1;
}
于 2019-05-24T20:43:44.783 回答