Использование множественного выбора вместе с раскрывающимся треугольником, отображаемым в пользовательском интерфейсе - PullRequest
Новая
       34

Использование множественного выбора вместе с раскрывающимся треугольником, отображаемым в пользовательском интерфейсе

0 голосов
/ 22 февраля 2019

Есть ли способ сохранить раскрывающийся треугольник (▼) для режима multiple при ui-select? 

<div ui-select multiple ng-model="selectedItems" class="form-control">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

Мне удалось украсть треугольник у обычного ui-select: 

<i class="caret pull-right" ng-click="$select.toggle($event)"></i>

, но возникают трудности с его корректным отображением на обычном месте справа.Какие-нибудь советы?Благодаря.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Лучший подход, который я разработал, - это масштабируемое фоновое SVG-изображение, примененное с использованием этого CSS: 

.select2-search-field {
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
}
0 голосов
/ 26 февраля 2019

Решение, которое я получил до сих пор: повторно использовал этот класс caret и отобразил его поверх компонента, используя стиль position: relative; left: -1.5em;, поместив элемент сразу после ui-select (поместить его прямо внутрь ui-select невозможнопотому что angularjs заменяет его содержимое собственными шаблонами - поэтому мой caret идет после, но затем сдвигается влево)

Кроме того, мне пришлось присоединить ng-click, который делает $select.toggle($event) к этому элементу caret.Поскольку $select недоступен вне области действия ui-select, мне пришлось представить внешний контроллер, который включает элементы ui-select и caret - и просто назначить $select поле внутри него, используя ng-initна ui-select.

Так это выглядит примерно так: 

<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

<span style="position: relative; left: -1.5em;" class="caret" 
ng-click="mySelect.toggle($event)></span>

▼ отображается только тогда, когда раскрывающийся список не открыт.Кроме того, щелчок по нему требует некоторой пиксельной охоты (можно уменьшить, поместив caret в делитель, который распространяется по вертикали).Так что это частичное решение.

...