Consider this polymer-element
<polymer-element name="my-card" attributes="title content">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px"><h2>{{title}}</h2></div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">{{content}}</p></div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(){
alert('tapped!');
}
});
</script>
</polymer-element>
this is how I am using it
<my-card content="this is a test body" title="Here is a nice Title"></my-card>
it works but when I use html in the content attribute like
<my-card content="this is a test body <p>with paragraphs</p>" title="Here is a nice Title"></my-card>
they are handled like text, is there any way to pass HTML code to attribute and embed it in polymer-template
I think what you actually want is to use the <content></content> insertion point within your <template>, rather than creating an attribute named content and using variable interpolation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<polymer-element name="my-card" attributes="title">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px">
<h2>{{title}}</h2>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<content></content>
</div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(e) {
console.log('tapped!', e);
}
});
</script>
</polymer-element>
<my-card title="Here is a nice Title">
this is a test body <p>with paragraphs</p>
</my-card>
</body>
</html>
Related
I would like to use flexbox in Polymer to create tables out of divs.
But the main problem is that by "cells" squish because of the content inside it when I change the size of the puter div. In the example below, try resizing the browser window. How do I get it to obey the size defined by flex as first priority while still wrapping text?
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
Thanks
Cheers
Adding this to your border class should solve the issue.
word-break: break-word;
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src='webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='polymer/polymer.html'>
<link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
word-break: break-word;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'base-page'
});
});
</script>
<base-page></base-page>
</body>
So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. This is how I like my app to do. But in my real app I'd like to not include a tag that contain my secondview.html. I would like it to be in its own separate file. But when I do that the prism css file won't work inside the ui-view.
Is there any configuration I would have to do? I believe it has something to do with the ng-binding.Here is what it looks like inside the ui-view. I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render.
This is what it looks like when the view is in its own separate file(Not Working)
The Code below me has the secondview.html inside the index.html(Works)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});
<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Need a directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div>:
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
Then it worked.
Plunder demo here.
I don't understand why the each clause is not working after I add the template "simple-todos" around them?!
<template name="simple-todos">
<head>
<title>Todo List</title>
</head>
<body>
<div class="row">
<header>
<h1>Todo List</h1>
{{> addObjects}}
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}</span>
<span class="text">{{createdAt}}</span>
</li>
</template>
When I'm not using the template name "simple-todos" I became directly the values from the database...
Thanks for help...
You are not allowed to put head and body tags inside a Meteor template, use this approach instead :
HTML
<!-- HEAD and BODY must be top level tags -->
<head>
<title>Todo List</title>
</head>
<body>
{{> simpleTodos}}
</body>
<template name="simpleTodos">
<div class="row">
...
</div>
</template>
http://jsbin.com/mefonoqanu/1/edit?html,output
This JSBin doesn't render its contents. It does not display:
its header section — the <paper-toolbar> text (i.e., "Header") or
its content panel section — the <div> element (i.e., "Content goes here...").
What am I doing wrong? Please provide a working JSBin example.
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/kabede/5/edit?html,output
The changes:
webcomponents from rawgit instead of bower_components
<span class="title"> to make header visible
style="width:100%; height: 100%;" on element to see its content
Code of accepted answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar ><span class="title">Header</span></paper-toolbar>
<div >
Content goes here...<br>
</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
Here is the minimum markup necessary to answer the question:
http://jsbin.com/jocinasovo/edit?html,output
Changes
Added style using :host
Only need height not width
No need to switch from bower_components (per this link) to rawgit CDN
No need for .flex class on <paper-header-panel>
Note: Per this link, <paper-header-panel> requires host to have a height.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
:host {
height: 100%
}
</style>
<paper-header-panel>
<paper-toolbar><span>Header</span></paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
Why are these two snippets different?
The first snippet works as expected
The second is just a copy of the contents of the body tag placed into a custom element called my-header and my-header is inserted into the body tag
The second one is not honoring the height of the body tag using fullbleed layout vertical.
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
</head>
<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<polymer-element name="my-header" attributes="">
<template>
<style>
</style>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</template>
<script>
(function () {
Polymer({
// define element prototype here
});
})();
</script>
</polymer-element>
</head>
<body fullbleed layout vertical>
<my-header></my-header>
</body>
</html>
You just need to add the height to your element and core-header-panel
<style>
:host, core-header-panel {
height: 100%;
}
</style>
<!doctype html>
<html>
<head>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<polymer-element name="my-header">
<template>
<style>
:host,
core-header-panel {
height: 100%;
}
</style>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">Content goes here...</div>
</core-header-panel>
</template>
<script>
(function() {
Polymer({
// define element prototype here
});
})();
</script>
</polymer-element>
</head>
<body fullbleed layout vertical>
<my-header></my-header>
</body>
</html>