I've been working with Polymer lately, and I have an iron selector full of paper-icon-items in a paper drawer for navigation purposes. But for some reason, I can't get them to link:
<iron-selector selected="[[page]]" attr-for-selected="name">
<paper-icon-item name="home">
<iron-icon icon="icons:home" item-icon></iron-icon> Home
</paper-icon-item>
<paper-icon-item name="account">
<iron-icon icon="social:person" item-icon></iron-icon> Account
</paper-icon-item>
<paper-icon-item name="news">
<iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
</paper-icon-item>
<paper-icon-item name="downloads">
<iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
</paper-icon-item>
<paper-icon-item name="contact">
<iron-icon icon="icons:mail" item-icon></iron-icon> Contact
</paper-icon-item>
</iron-selector>
And then the iron pages:
<iron-pages selected="[[page]]" attr-for-selected="name">
<section name="home"> <h1>Home</h1> </section>
<section name="account"> <h1>Account</h1> </section>
<section name="news"> <h1>News</h1> </section>
<section name="downloads"> <h1>Downloads</h1> </section>
<section name="contact"> <h1>Contact</h1> </section>
</iron-pages>
Square brackets are used for one way data binding, so the change to "page" made by iron-selector can't propagate. Try changing the binding type in the iron-selector:
<iron-selector selected="{{page}}" attr-for-selected="name">
This should allow the change to propagate to the iron-pages.
It is working for me when I change the code to:
<iron-selector selected="{{pages}}" attr-for-selected="name">
<paper-icon-item name="home">
<iron-icon icon="icons:home" item-icon></iron-icon> Home
</paper-icon-item>
<paper-icon-item name="account">
<iron-icon icon="social:person" item-icon></iron-icon> Account
</paper-icon-item>
<paper-icon-item name="news">
<iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
</paper-icon-item>
<paper-icon-item name="downloads">
<iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
</paper-icon-item>
<paper-icon-item name="contact">
<iron-icon icon="icons:mail" item-icon></iron-icon> Contact
</paper-icon-item>
</iron-selector>
<iron-pages selected="[[pages]]" attr-for-selected="name">
<section name="home"> <h1>Homes</h1> </section>
<section name="account"> <h1>Account</h1> </section>
<section name="news"> <h1>News</h1> </section>
<section name="downloads"> <h1>Downloads</h1> </section>
<section name="contact"> <h1>Contact</h1> </section>
</iron-pages>
The difference is [[pages]] and {{pages}} in iron-selector.
Related
I am confused on where I need template tags for this code. Originally I had no templates and my v-ifs didn't load. I added them in to see if it would fix it but had no luck. Weirdly my bottom v-if with the delete button seems to work. All the data seems to be correctly initialized. I saw people using the computed data section but since every post entry is rendered it seems like not the correct way to do this.
<!-- and now the posts -->
<div class="container block">
<template v-for="post in posts">
<div class="notification mb-4">
<h1><strong>{{post.content}}</strong></h1>
<h2><small>{{post.name}}</small></h2>
<!-- Delete Icon -->
<div class="columns">
<div class="column is-11">
<!-- Thumbs stuff -->
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_up(post._idx)" #mouseover="post_over(post._idx, true)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === 1">
<!-- Filled in -->
<i class="fa fa-thumbs-up"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-up"></i>
</template>
</span>
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_down(post._idx)" #mouseover="post_over(post._idx, false)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === -1">
<!-- Filled in -->
<i class="fa fa-thumbs-down"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-down"></i>
</template>
</span>
<template v-if="post.show_likers">
<span class="is_link">Liked by</span>
</template>
<template v-if="post.show_dislikers">
<span class="is_link">Disliked by</span>
</template>
</div>
<div class="column">
<div v-if="post.owner" class="container block">
<span class="button inverted is-light icon is-medium has-text-danger" #click="delete_post(post._idx)">
<i class="fa fa-trash"></i>
</span>
</div>
</div>
</div>
</div>
</template>
</div>
Also my icons that are "fa fa-thumbs-down" work but my "fa fa-thumbs-o-down" do not work, any idea why?
Chack you version of font awesome fa fa-thumbs-o-down is for 4:
const app = Vue.createApp({
data() {
return {
posts: [{_idx: 1, content: 'bbb', name: 'BBB', rating: 0, show_likers: 8, show_dislikers: 2, owner: 'www'}]
};
},
methods: {
post_over(id) {},
post_out(id) {}
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div class="container block">
<template v-for="(post, i) in posts" :key="i">
<div class="notification mb-4">
<h1><strong>{{post.content}}</strong></h1>
<h2><small>{{post.name}}</small></h2>
<!-- Delete Icon -->
<div class="columns">
<div class="column is-11">
<!-- Thumbs stuff -->
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_up(post._idx)" #mouseover="post_over(post._idx, true)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === 1">
<!-- Filled in -->
<i class="fa fa-thumbs-up"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-up"></i>
</template>
</span>
<span class="button inverted is-light icon is-medium has-text-info" #click="rating_down(post._idx)" #mouseover="post_over(post._idx, false)" #mouseout="post_out(post._idx)">
<template v-if="post.rating === -1">
<!-- Filled in -->
<i class="fa fa-thumbs-down"></i>
</template>
<template v-if="post.rating === 0">
<!-- Not filled in -->
<i class="fa fa-thumbs-o-down"></i>
</template>
</span>
<template v-if="post.show_likers">
<span class="is_link">Liked by</span>
</template>
<template v-if="post.show_dislikers">
<span class="is_link">Disliked by</span>
</template>
</div>
<div class="column">
<div v-if="post.owner" class="container block">
<span class="button inverted is-light icon is-medium has-text-danger" #click="delete_post(post._idx)">
<i class="fa fa-trash"></i>
</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
In my project I have this Help/FAQ Dialog. I'm trying make
only selected information to display but not sure how to do that so I would be really appreciated if I can get any help or suggestion.
For example,
when the user selected Item 1 from expansion panel, The right columns will display only Item 1 information and hide the others.
<div mat-dialog-content class="dialog-container">
<div class="container-inside-dialog">
<div class="row">
<div class="column left" style="background-color:pink">
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 1
</mat-expansion-panel-header>
<a mat-list-item routerLink>Item 1</a>
<a mat-list-item routerLink>Item 2</a>
<a mat-list-item routerLink>Item 3</a>
</mat-expansion-panel>
</mat-nav-list>
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 2
</mat-expansion-panel-header>
<a mat-list-item routerLink>Item 4</a>
<a mat-list-item routerLink>Item 5</a>
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right" style="background-color:grey">
<!-- Show this only when Item 1 is selected -->
<h2>Item 1</h2>
<p>Some text for Item 1..</p>
<p>more text.......</p>
<!-- Show this only when Item 2 is selected -->
<h2>Item 2</h2>
<p>Some text for Item 2..</p>
<!-- Show this only when Item 3 is selected -->
<h2>Item 3</h2>
<p>Some text for Item 3..</p>
<!-- Show this only when Item 4 is selected -->
<h2>Item 4</h2>
<p>Some text for Item 4..</p>
<!-- Show this only when Item 5 is selected -->
<h2>Item 5</h2>
<p>Some text for Item 5..</p>
</div>
</div>
</div>
</div>
This is my stackblitz project https://stackblitz.com/edit/mat-expansion-panel-bn9uwv
Thank you
Do it in steps
1-detect click on each item u want to be clicked
2-identify each click separately
3-store each click index or number
4-using that number show only desired item
here is code
Component
import {Component} from '#angular/core';
/**
* #title Basic expansion panel
*/
#Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
panelOpenState = false;
clickedIndex = -1;
clicked(index:number){
this.clickedIndex = index;
console.log(index);
}
}
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
Template
<div mat-dialog-content class="dialog-container">
<div class="container-inside-dialog">
<div class="row">
<div class="column left" style="background-color:pink">
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 1
</mat-expansion-panel-header>
<a mat-list-item routerLink (click)="clicked(1)">Item 1</a>
<a mat-list-item routerLink (click)="clicked(2)">Item 2</a>
<a mat-list-item routerLink (click)="clicked(3)" >Item 3</a>
</mat-expansion-panel>
</mat-nav-list>
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 2
</mat-expansion-panel-header>
<a mat-list-item routerLink (click)="clicked(4)" >Item 4</a>
<a mat-list-item routerLink (click)="clicked(5)">Item 5</a>
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right" style="background-color:grey">
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==1">
<h2>Item 1</h2>
<p>Some text for Item 1..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 2 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==2">
<h2>Item 2</h2>
<p>Some text for Item 2..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==3">
<h2>Item 3</h2>
<p>Some text for Item 3..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==4">
<h2>Item 4</h2>
<p>Some text for Item 4..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==5">
<h2>Item 5</h2>
<p>Some text for Item 5..</p>
<p>more text.......</p>
</ng-container>
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center start">
<span style="flex-grow: 1;"></span>
<button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
matTooltip="Close Help">Close</button>
</div>
</div>
i want to create a dropdown menu and add logout button in toolbar. But paper-menu-button is not working inside paper-toolbar.
<paper-toolbar id="order-toolbar">
<template is="dom-if" if="[[ showHome ]]">
<img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
</template>
<template is="dom-if" if="[[ !showHome ]]">
<iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
</template>
<h2 class="orders-heading">Store owner</h2>
<paper-menu-button>
<paper-icon-button id="header-menu-button" icon="more-vert" slot="dropdown-trigger"></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
</paper-toolbar>
<paper-toolbar id="order-toolbar">
<template is="dom-if" if="[[ showHome ]]">
<img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
</template>
<template is="dom-if" if="[[ !showHome ]]">
<iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
</template>
<h2 class="orders-heading">Store owner</h2>
<paper-menu-button>
<paper-icon-button id="header-menu-button" icon="more-vert" class="dropdown-trigger">
</paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
</paper-toolbar>
I notice you are using slot="dropdown-trigger". Try using class="dropdown-trigger". I think slot must be from Polymer 2.0?
I have problem with jQuery Mobile. In jQuery Mobile to go to another page of site, I just need to add id of page block. But in the following code jQuery Mobile don't work, when i'm clicking on the list items. Here is my code:
<div id="all" data-role="page" data-url="all" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 642px;">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back" class="ui-link ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all" role="button">
Back
</a>
<h1 class="ui-title" role="heading" aria-level="1">All Notes</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" id="all_notes" class="ui-listview"><li class="ui-first-child">
Boris
</li><li>
Note
</li><li class="ui-last-child">
eferf
</li></ul>
</div>
</div>
<div id="note-detail-list"><div data-role="page" id="note_afed16af-9fea-03fc-9315-5ca1f690b665" data-url="note_afed16af-9fea-03fc-9315-5ca1f690b665">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>Boris</h1>
</div>
<div data-role="content">
The best
</div>
</div><div data-role="page" id="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" data-url="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>Note</h1>
</div>
<div data-role="content">
gjfth
</div>
</div><div data-role="page" id="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" data-url="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a">
<div data-role="header">
<a href="#home" data-role="button" data-icon="arrow-l" data-rel="back">
Back
</a>
<h1>eferf</h1>
</div>
<div data-role="content">
freferf
</div>
</div></div>
DEMO
There is a problem in the markup, so jquery mobile is not rendering correctly:
<div id="note-detail-list">
is out of all pages.
If you remove it everything works. Try:
http://jsfiddle.net/7M5c5/3/
I am trying to do a drawer menu for in my Firefox OS app, based in the Bulding Blocks from Firefox team:
http://buildingfirefoxos.com/building-blocks/drawer.html
At the moment I have a menu button that show and hide the menu, but I can not change to other page when the user click in a different item in the menu.
With this code I can see the Page 1 when the app start, but the page2 is no loaded when I select the button "page 2" in the menu
<section id="index" data-position="current">
<section data-type="sidebar">
<header>
<menu type="toolbar" />
</menu>
<h1>My Menu</h1>
</header>
<nav>
<ul>
<li>
page 1
</li>
<li>
page 2
</li>
</ul>
</nav>
</section>
<!-- Page 1 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 1</h1>
</header>
<article class="content scrollable header">
<section id="page1_list" data-type="list"></section>
</article>
</section>
<!-- Page 2 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 2</h1>
</header>
<article class="content scrollable header">
<section id="page2_list" data-type="list"></section>
</article>
</section>
I have an example using buildingblock (draw)
https://github.com/marti1125/Earthquake
Try to copy this: https://github.com/marti1125/Earthquake/blob/master/css/app.css