Как добавить «Очистить кнопку» в раскрывающееся меню?

Question

В бумажном входе у меня есть «Clear Button»:

<paper-input 
      id="myinput" maxlength="10" char-counter label="myinput" 
      always-float-label required> 
    <paper-icon-button suffix 
     onclick="clearInput('InputClientes')" 
     icon="clear" 
     class="iconClear" 
     alt="clear" 
     title="clear"> 
    </paper-icon-button> 
</paper-input> 

Можно добавить аналогичную кнопку (Clear Button) к-ниспадающего меню бумаги, чтобы очистить выбор ?.

Спасибо.

Answer 1

1. Если вы используете paper-dropdown-button с paper-listbox внутри, вы можете вызвать его свойство selected в null, чтобы очистить текущее значение.

2. Добавить кнопку, которая будет называть этот метод, и нарисуйте его с помощью правила CSS position:relative, чтобы поместить его в нужное место.

3. Слушайте событие iron-select, чтобы показать кнопку [закрыть], когда элемент выбран в списке.

<paper-dropdown-menu id=PDM label="Your favourite pastry"> 
    <paper-listbox id=PL class="dropdown-content"> 
     <paper-item>Croissant</paper-item> 
     <paper-item>Donut</paper-item> 
     <paper-item>Financier</paper-item> 
     <paper-item>Madeleine</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 
<paper-icon-button id=CloseBtn icon="clear" onclick="clearInput()" hidden ></paper-icon-button> 

<script> 
    function clearInput() { 
     PL.selected = null 
     CloseBtn.hidden = true 
    } 
    PDM.addEventListener('iron-select', function (ev) { 
     CloseBtn.hidden = false 
    }) 
</script>