Ссылка на бумажный элемент внутри кнопки меню (Polymer-1.0)
update 1: нашел эту проблему с запросом на перенос, который, похоже, решает эту проблему в Polymer.
update 2. Решено перестроить мой макет на основе Polymer Starter Kit, который вместо этого использует page.js из приложения-маршрутизатора и, кажется, работают хорошо, хотя они не используют бумажный элемент в меню бумаги, а вместо этого используют пользовательские элементы привязки.
Искать каждую бит документации, но я не могу найти ее (хотя есть qaru.site/info/415825/... с почти одним и тем же названием, не то же самое)
TL;DR: мне нужно, чтобы весь документ был нажат на ссылку. Не только сам текст. Для ясности см. Изображение ниже, и вот живой код.
.
У меня есть что-то вроде кода ниже. Я использую теги ссылок в сочетании с маршрутизацией приложения-маршрутизатора, которая отлично работает. Единственная проблема заключается в следующем: я хотел бы, чтобы весь документ-пункт меню был доступен клику с тегом ссылки.
Когда я использую приведенный ниже код, правая страница извлекается при непосредственном нажатии непосредственно на тег linkk, но это не создает "выбранное" состояние. Когда я нажимаю на кнопку (сразу после текста), тогда выбирается кнопка IS, но страница не извлекается, потому что я не нажимал ссылку...
Должен быть простой способ сделать это правильно? Я имею в виду, я мог бы заставить это переопределить все CSS, но мне кажется, что ссылка в бумажном элементе в бумажном меню будет очень распространенной вещью, которая должна делать это автоматически или с атрибутом или сопутствующим?
<paper-menu class="list">
<paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
<paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>
Я проверил документацию на бумажном, бумажном меню и других, но они никогда не используют пример со ссылкой.
Ответы
Ответ 1
IMO, самый чистый способ - просто полностью удалить ссылки и просто добавить событие on-tap.
(Вы также можете использовать dom-repeat для своего меню)
<paper-menu class="list">
<paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
<paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>
Я предполагаю, что вы используете теги <a>
из-за app-router.
Из документа app-router:
go (путь, параметры). Вы можете вызвать маршрутизатор из Javascript для обеспечения императивного перехода.
Затем вы можете просто написать собственный обработчик на вкладке и использовать для каждого <paper-item>
пользовательский атрибут (mypath)
Polymer({
is: 'your-menu',
menuSelected: function (e) {
var mypath = e.currentTarget.getAttribute('mypath');
document.querySelector('app-router').go(mypath);
},
})();
Ответ 2
Добавьте class="flex"
к каждому из ваших якорных тегов.