Как сделать выбор в Blueprintjs использовать (или имитировать) заливку?Или даже быть фиксированной ширины? - PullRequest
Новая
       31

Как сделать выбор в Blueprintjs использовать (или имитировать) заливку?Или даже быть фиксированной ширины?

1 голос
/ 23 апреля 2019

Я сделал выборочный элемент управления, используя документацию в качестве примера. Однако кнопка меняет свою ширину в зависимости от ширины текста для выбранного элемента. Это заставляет элемент управления перепрыгивать и не является хорошим дизайном пользовательского интерфейса.

first

second

Есть ли способ указать, используя fill или чтобы кнопка была фиксированной ширины? В то время как я частично успешно установил фиксированную ширину, визуализированный элемент управления был уродливым, и текст, и стрелка были отцентрированы, как показано здесь:

fixed width, but centered content

Вместо этого я хочу вот что:

fixed width, properly aligned content

Как это можно создать с помощью blueprintjs?

Поскольку кто-то попросит SSCCE, я использовал именно это: https://blueprintjs.com/docs/#select/select-component

Edit:

Мне удалось получить желаемый результат, но, похоже, сама библиотека должна справиться с этим, вместо того чтобы прибегать к серии CSS-хаков. Следующие изменения 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;
}

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Существует проблема 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 вместо Выберите , он имеет желаемое поведение по умолчанию, когда «fill» имеет значение true.

фиксированная ширина

Если вы хотите сделать выбор и фиксированную ширину списка, у вас есть 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;
}
0 голосов
/ 24 мая 2019

Это должно работать, если контейнер кнопки равен 100%.Просто установите несколько дополнительных селекторов, чтобы они не влияли на ваше приложение в глобальном масштабе. 

.bp3-button {
  width: 100%;
}

.bp3-button-text {
  flex-grow: 1;
}
...