I've been having problems trying to work with paper-icon-button with Polymer. My code so far is very simple. The website generates the space that the icon uses and reacts with the right behaviour to respond to the mouse's events but the icon doesn't show up
<paper-toolbar class="gallery_header">
<paper-icon-button icon="menu"></paper-icon-button>
<span title class="flex">Admin</span>
</paper-toolbar>
The scripts that are being loaded in order are:
webcomponentsjs
polymer
iron-icon
bootstrapiron-ajaxiron-imagepaper-drawer-paneljquerypaper-header-panelpaper-stylespaper-icon-buttonpaper-toolbarreact
What you need to do extra in order to make that menu icon appear is to import the iron-icons element which is just a collection of SVG icons. For more information about the iconsets and the iron-icons element, you can check out Rob Dodson's episode on this topic from the Polycasts series.
Related
So, I have a Vuetify navigation drawer, and in it I have several list items, among them one containing a slider. Most of the time it works the way I want it, but some times the template element at the back will disappear, including the HTML element in the browser inspection tab. I have not really been able to figure out exactly what triggers this since it's quite rare..
This is how it looks like when it's working..
..and what happens when it breaks!
Here is the HTML code for the list element
<v-list-item>
<v-list-item-content>
<v-list-item-title class="presTitle">Presentation delay</v-list-item-title>
<v-slider
v-model="presentationInterval"
prepend-icon="mdi-clock"
dense
:min="6000"
:max="60000"
step="3000"
>
<template v-slot:append>
<p class="durationText">
{{ (presentationInterval / 1000).toString() + "s"}}
</p>
</template>
</v-slider>
</v-list-item-content>
</v-list-item>
Anyone see any obvious mistakes or why this works 99% of the time but some times break?
<b-tabs>
<b-tab active>
<template v-slot:title>
<b-img src="../assets/logo_big.png"></b-img> I'm <i>custom</i> <strong>title</strong>
</template>
<p class="p-3">Tab contents 1</p>
</b-tab>
</b-tabs>
doesn't work. i don't want to use navbar because i don't want the page to update the url. I was thinking of making a invisible b-tab and putting a clickable image on top however i'm wondering if there is a better way to do this.
I am delving into the confusing world of web accessibility and trying to retrofit my HTML code to have better accessibility with things such as aria-labels etc.
Trying to tab through my webpage app-header, I am not able to select the page title... Should I be able to, or am I worrying about nothing?
The burger menu and the search bar icon are able to be tabbed. I'm just wondering whether the text should be? Because it is not being read out either.
FYI: I am using ChromeVOX as a screen reader
<app-header class="topHeader" fixed shadow slot="header"> <!-- effects="waterfall" not needed as nothing scrolls behind header bar -->
<app-toolbar>
<paper-icon-button id="toggleDrawer" icon="menu" on-click="toggleMenu" title="Expand menu" aria-title="Expand menu"></paper-icon-button>
<div main-title>App Header Goes Here</div>
<search-bar></search-bar> <!-- This is an external element being called in -->
</app-toolbar>
</app-header>
Does clicking on it do anything (navigate to another page, open up a new set of options using DOM manipulation, etc) that isn't behaviour duplicated by some other control?
If so, then it should be possible to tab to it.
If not, that isn't needed.
(If it does nothing, then it is counter productive to allow it to be focused).
I am using something like this:
<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
<sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
<sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
<sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>
</neon-animated-pages>
That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.
for exmaple inside I have something like this:
dom-module id="sys-neonpage1">
<template>
<sys-elemento class="prueba"></sys-elemento>
</template>
And the element has his own animations that never started if i use it inside ...
is that posible?, thanks a lot.
What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes
In general, i recommend you read the whole "using neon-animations" guide as it is well written.
I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.
<paper-menu selected="{{selected}}">
<paper-item on-tap="_onItemTap" role="menuitem">
<iron-icon icon="cloud-done"></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary class="second-item-line">Complete</div>
</paper-item-body>
</paper-item>
(... other items)
</paper-menu>
The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.
Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?
Update:
Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.
I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:
<paper-card>
<div class="card-content">
<iron-selector selected="{{selected}}">
<paper-icon-item on-tap="_onItemTap">
<iron-icon icon="cloud-done" item-icon></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary>Complete</div>
</paper-item-body>
</paper-icon-item>
<!-- other items -->
</iron-selector>
</div>
</paper-card>