Is it possible to include a round thumbnail in the paper-card element following the material design card specification on https://material.io/guidelines/components/cards.html#cards-actions ?
The webcomponents.org documentation only showcases a fullscreen image implemented via <paper-card image="demo/donuts.png">, I however would like to implement something like
Is this possible with the paper-card Polymer 2 element?
You can achieve that by using paper-icon-item inside paper-card.
<paper-card heading="Emmental">
<div class="card-content">
<!-- Paper icon item starts here -->
<paper-icon-item>
<div class="avatar blue" slot="item-icon"></div>
<paper-item-body two-line>
<div>Alphonso Engelking</div>
<div secondary>Change photo</div>
</paper-item-body>
</paper-icon-item>
<!-- Paper icon item ends -->
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
Hope this helps :)
Related
I'm wondering what's the best way to add a background to the app.component of my Angular 5 Application using Angular Material 2. I've seen a few previous stack overflow posts regarding this in previous versions of Angular and tried using them but to no avail.
So I was looking to see what is the currently reccomended way of doing this in Angular 5 w/ Angular Material 2.
Thank you
Path to the image from this component "../../images/background.jpg"
<div [class.app-dark-theme]="true">
<mat-sidenav-container fullscreen class="sidenav-container">
<!-- The Navigation button at the top of the application -->
<mat-toolbar color="primary">
<div class="select-discord">
<mat-icon svgIcon="thumbs-up"></mat-icon> Discord
</div>
<div class="select-twitch">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitch
</div>
<div class="select-twitter">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitter
</div>
<div class="select-youtube">
<mat-icon svgIcon="thumbs-up"></mat-icon> YouTube
</div>
</mat-toolbar>
<img class="img-responsive" src="../../images/background.jpg">
<!-- Main content of the website -->
<div class="app-content">
<mat-card>
text here
</mat-card>
</div>
</mat-sidenav-container>
</div>
A proper way of adding a background would be to add an id to your container and give that id the following css rule:
#my-bg {
background: url('../../images/background.jpg') no-repeat center;
background-size: cover;
}
everyone!
I wanted to use paper-header-panel with mode waterfall and custom element 'iron-swipeable-pages'. My code looks somehow like this: (it is not the exact copy, just the structure)
<paper-drawer-panel id="drawer" force-narrow>
<div drawer>
<!-- Drawer panel -->
</div>
<div main>
<paper-header-panel id="paperHeaderPanel" mode="waterfall">
<paper-toolbar id="appbar">
<!-- Toolbar content -->
</paper-toolbar>
<iron-swipeable-pages
padding="16"
id="ironSwipeablePages"
edge-swipe-sensitivity="30"
selected="{{selected}}">
<div id="overview">
1
</div>
<div id="timetable">
2
</div>
<div id="teachers">
3
</div>
<div id="calendar">
4
</div>
</iron-swipeable-pages>
</paper-header-panel>
</div>
</paper-drawer-panel>
The <div> elements inside <iron-swipeable-pages> are scrollable but when I scroll them the waterfall effect on paper-header-panel isn't working.
I tried this:
this.$.paperHeaderPanel.scroller = this.$.overview;
In ready script of element because I saw that property isn't marked as read-only in element reference. However, it does not work. Do you have any ideas how to make waterfall effect work?
Is there something like Bootstrap panels in MaterializeCSS?
Bootstrap panels here:
http://www.w3schools.com/bootstrap/bootstrap_panels.asp
The closest thing to a Bootstrap panel would be called card-panel in Materialize CSS.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet"/>
<!--Card Panel-->
<div class="card-panel">
<span class="black-text">A Basic Panel</span>
</div>
Cheers
Panel and well are abonded by bootstrap in their upcoming v4.0
Bootstrap Developer Explains Here..
Basically Cards are much better replacements of panels and you can get same results in them.
<div class="row">
<div class="col s4">
<div class="card darken-1">
<div class="card-content ">
<span class="card-title">Card Title</span>
<p>I am a very simple card.
I am good at containing small bits of information.
I am convenient because I require little markup to
use effectively.
</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
however if you like the look and feel of bootstrap panel with different title background and different body background then you'll have to stick with bootstrap not materializecss
As part of my page I have a list that I need to attach a scroll bar too. The entire page is within a paper-header-panel. If I give the paper-scroll-header-panel a height in pixels then it displays fine but otherwise, even if I set it to "width: 100%" it will not display. It seems it ought to be easier then I am trying to make it. are there any tips you can send along as to what I might be doing wrong?
David
<paper-header-panel class="flex">
<paper-toolbar>
<div>MyViewer</div>
</paper-toolbar>
<div class="horizontal layout flex">
<div class="flex">
<paper-scroll-header-panel>
<paper-toolbar>
<div>Hello</div>
</paper-toolbar>
<div>
<h4>here 1</h4>
<h4>here 2</h4>
<h4>here 3</h4>
<h4>here 4</h4>
<h4>here 5</h4>
</div>
</paper-scroll-header-panel>
</div>
<div>
<h2>Stuff</h2>
</div>
</div>
</paper-header-panel>
Your paper-scroll-header-panel displays fine if you display it by itself. Maybe this is why it's not displaying in your sample:
The documentation for paper-scroll-header-panel says:
Important: The paper-scroll-header-panel will not display if its parent does not have a height.
https://elements.polymer-project.org/elements/paper-scroll-header-panel
So I have a custom element called my-element and within that element I have a repeating template that displays a bunch of custom elements called my-card. So I was using inline-block to divide the cards in two columns and that worked but since the cards were of different heights there was some ugly white space in between. As per a suggestion from user here on stackoverflow I used column-count to make it work. Visually, it worked but the my-cards on the right column are not interactive.
If I hover under the first column, I can click the my-cards that are supposed to be in the second column.
Despite it not showing in the image above, the my-cards will be of different heights so I need to have a masonry layout. One column in mobile screen width and two columns in tablet+. How can I achieve that?
Here's the code: http://pastebin.com/NFv6ed2T
I don't see any repeats or anything, but why not change your code to use horizonal and vertical layouts? Remove all excess styling except for that.
And the <section> tag probably isn't necessary.
Assuming you include the iron-flex-layout code somewhere...
working code w/simple styling: http://jsbin.com/cetece/1/edit?html,output
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
This is an example if you need to have the buttons wrap into one row if the container is too small for 2 rows: http://jsbin.com/cetece/2/edit?html,output
Add wrap class to the rows and adjust the styles for a fixed button size and non-fixed wrapping container.
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
If you need the buttons to go be able to all align horizontally if needed then simply remove all of the row containers, and the vertical layout container, and place all paper-buttons in one single container, such as the paper-material.