Изменение высоты бумажного материала на бумаге-навороте (Polymer 1.0)

Я пытаюсь создать плавающую кнопку добавления в приложении Polymer 1.0 с аналогичной функциональностью с плавающей кнопкой добавления в Google Inbox. Первый вопрос тогда:Изменение высоты бумажного материала на бумаге-навороте (Polymer 1.0)

Для достижения аналогичной функциональности, я в настоящее время с помощью paper-fab элемента и onmouseover и onmouseout Js функции следующим образом:

<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab> 

<script> 

    hoverOver = function(srcElement) { 
     srcElement.querySelector("paper-material").elevation = 4; 
    }; 

    hoverOut = function(srcElement) { 
     srcElement.querySelector("paper-material").elevation = 0; 
    }; 

</script>

Это рекомендуемый подход, или есть дождевик, более «полимеризованный» способ достижения этого?

источник

2015-08-06 sinjins

Вы можете достичь этого, используя css.

paper-fab::shadow > paper-material { 
    @apply(--shadow-none); 
} 

paper-fab::shadow > paper-material:hover { 
    @apply(--shadow-elevation-8dp); 
}

В исходном коде paper-material элемента, вы можете увидеть, что атрибут elevation только для установки в box-shadow стиль на элемент. Поэтому вместо обновления атрибута в js (который затем устанавливает css), вы можете просто обновить ту же самую вещь непосредственно в css.

<dom-module id="paper-material"> 
    <style> 
    :host { 
     display: block; 
     position: relative; 
     @apply(--shadow-transition); 
    } 

    :host([elevation="1"]) { 
     @apply(--shadow-elevation-2dp); 
    } 

    :host([elevation="2"]) { 
     @apply(--shadow-elevation-4dp); 
    } 

    :host([elevation="3"]) { 
     @apply(--shadow-elevation-6dp); 
    } 

    :host([elevation="4"]) { 
     @apply(--shadow-elevation-8dp); 
    } 

    :host([elevation="5"]) { 
     @apply(--shadow-elevation-16dp); 
    } 
    </style>

источник

2015-08-07 01:51:35

Спасибо Джастина. IINM, я где-то читал, что @apply все еще «экспериментально», а также что «тень» будет устаревать? Неужели я ошибаюсь? Если нет, это безопасный подход? – sinjins

@sinjins, он широко используется atm, но если он действительно изменился в будущем, вы всегда можете его правильно обновить? :) Кроме того, в 'shadow.html' вы обнаружите, что' --shadow-elevation-8dp' просто 'box-shadow: 0 8px 10px 1px rgba (0, 0, 0, 0.14), 0 3px 14px 2px rgba (0, 0, 0, 0.12), 0 5px 5px -3px rgba (0, 0, 0, 0.4); 'Вы можете заменить все это на фактический собственный css' box-shadow'. –

Действительно. Или я мог бы остаться с моим подходом, так что, когда команда Polymer обновит свой элемент 'paper-material', чтобы сделать его совместимым, когда« тень »вот-вот станет устаревшей, все, что мне нужно сделать, это обновление этого элемента и никаких изменений кода на моем конце. Это звуковая логика? – sinjins

Другой обходной путь помещается в <style> непосредственно в йот-модуль вашего element.html

paper-button:hover{ 
     @apply(--shadow-elevation-6dp); 
    }

может изменить дп на возвышении. Надежда помогает

источник

2015-11-13 17:13:31 whitefang3456

В качестве альтернативы, если вы хотите использовать HTML, убедитесь, что бумага материал имеет атрибут «анимированный» установлены в «истинный»

источник

2016-01-11 23:16:24

Изменение высоты бумажного материала на бумаге-навороте (Polymer 1.0)

ответ

Смежные вопросы