It's pretty basic but i don't know if it's a bug or i'm wrong with something.
I cant change the width of the drawer in the paper-drawer-panel. In the documentation page specify to add the property drawerWith.
Here is some code:
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
}
</style>
<paper-drawer-panel drawerWidth="300px">
<!-- Nav Bar -->
<section drawer>
<!-- Logo -->
<div id="logoContainer">
<img id="logo" src="../img/logo.png">
</div>
</section>
<!-- Content -->
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">My App</div>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
// element registration
Polymer({
is: "my-app",
});
</script>
</dom-module>
This should work:
<paper-drawer-panel drawer-width="300px">
Here you can find the documentation that talks about it.
Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.
So, in documentation says drawerWidth when you use it in your elements must be: drawer-width
Related
I am trying to render a Chart JS canvas via a slot;
chartWrapper.html
<template>
<div class="chart-wrapper">
<slot name="chart"></slot>
</div>
</template>
chartWrapperContainer.html
<c-chart-wrapper>
<canvas slot="chart" class="donut" lwc:dom="manual"></canvas>
</c-chart-wrapper>
The chart does not render and the canvas in the rendered Markup shows 0 width and height. Rendering without the slot works well; I need to wrap it into a slot for structural reasons.
What could be wrong with this?
This was sorted out by wrapping the canvas in a div; made some logical sense to me not to push a plain 'photo' into a slot whose internals it's unaware of.
<!-- chartWrapper.html -->
<template>
<div class="chart-wrapper">
<slot name="chart"></slot>
</div>
</template>
<!-- chartWrapperContainer.html -->
<c-chart-wrapper>
<div slot="chart">
<canvas class="donut" lwc:dom="manual"></canvas>
</div>
</c-chart-wrapper>
Alternately, you could set a CSS property that defines the Custom Element as a block, or inline-block through the :host pseudo-class. (By default a custom element has its display value set to inline.)
Then you can set its height and width or let the default ones:
<!-- chartWrapper.html -->
<template>
<style>
:host {
display: inline-block ;
width: 50% ;
height: 200px ;
}
</style>
<slot></slot>
</template>
I have a simple component site-header in Angular 1.6 (code below: site-header.js and site-header.html). I use it in my markup as element <site-header></site-header> (code below: app.html).
The problem I'm having is I would like to get rid of <site-header> element container, because that unnecessarily creates 2 containers for my header (code: resulting HTML) - <site-header> and <header> - while I only need 1. I like to have my markup clean and don't want any excessive containers. They may also force me to write additional styles. I'd like to get rid of one of them (code: desired HTML).
I tried stripping wrapping <header> from site-header.html but then Angular gave me error:
XML Parsing Error: junk after document element
Location: file:///home/robert/programming/e-lektury/e-lektury-web/src/main/webapp/dist/app/components/site-header/site-header.html
Line Number 6, Column 3:
Main question
Could you somehow get rid of 1 of the containers - reduce the number of wrapping elements to 1?
Additional question
Why is Angular forcing another container wrapping component's template, when you already have a wrapping element, which is a component's declaration (<component-name>)?
site-header.js
angular
.module('site-header', [])
.component('site-header', {
controller: function() {
this.pageTitle = "Page title";
this.pageSlogan = "Page slogan";
},
templateUrl: './app/components/site-header/site-header.html'
}
site-header.html
<header>
<section>
<h1>{{ $ctrl.pageTitle }}</h1>
<h2>{{ $ctrl.pageSlogan }}</h2>
</section>
<section>
<!-- Login and register. -->
Login
Register
<!-- Site search. -->
<input type="search" />
</section>
</header>
app.html
<body>
<site-header></site-header>
</body>
resulting HTML
<body>
<site-header>
<header>
<section>
<h1>Page title</h1>
<h2>Page slogan</h2>
</section>
<section>
<!-- Login and register. -->
Login
Register
<!-- Site search. -->
<input type="search">
</section>
</header>
</site-header>
</body>
desired HTML
<body>
<site-header>
<!-- NO <header> here! but there could be <header> instead of
<site-header> as long as there is only one of them. -->
<section>
<h1>Page title</h1>
<h2>Page slogan</h2>
</section>
<section>
<!-- Login and register. -->
Login
Register
<!-- Site search. -->
<input type="search">
</section>
</site-header>
</body>
I would change the component to a directive so you don't have to use an element, and instead can bind to an attribute:
JS
angular
.module('site-header', [])
.directive('site-header', function() {
return {
restrict: 'A',
replace: true,
controllerAs: 'vm',
controller: function() {
this.pageTitle = "Page title";
this.pageSlogan = "Page slogan";
},
templateUrl: './app/components/site-header/site-header.html'
}
}
Main HTML
<body>
<header site-header>
</header>
</body>
Resulting HTML
Page title
Page slogan
Login
Register
<!-- Site search. -->
<input type="search">
In AngularJs 1.x you can't get rid of the component name markup in the resulting html, But you can write the HTML you want in the component template :
if site-header.html =
<section>
<h1>{{ $ctrl.pageTitle }}</h1>
<h2>{{ $ctrl.pageSlogan }}</h2>
</section>
<section>
<!-- Login and register. -->
Login
Register
<!-- Site search. -->
<input type="search" />
</section>
and Main HTML :
<body>
<site-header></site-header>
</body>
You'll have the resulting html you expect i.e.:
<body>
<site-header>
<!-- NO <header> here! but there could be <header> instead of
<site-header> as long as there is only one of them. -->
<section>
<h1>Page title</h1>
<h2>Page slogan</h2>
</section>
<section>
<!-- Login and register. -->
Login
Register
<!-- Site search. -->
<input type="search">
</section>
</site-header>
</body>
I have a page designed in angular bootstrap. I am trying to use a popover as follws ..
<div class="col-md-4">
<div class="row">
<ul>
AM TEST AM
</ul>
</div>
</div>
The template I am using pops over fine, but I could not increase the size of the popover whatsoever.
How can I increase the size of the popover?
You can simply do this using CSS
<style>
.popover{ /* Will change ALL popovers. Add element id to target specific popver */
max-width: 100%
}
</style>
Is the a polymer equivalent for ng-show? Here's a snippet example of what I'm trying to convert:
<h1>Greeting</h1>
<div ng-show="authenticated">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div ng-show="!authenticated">
<p>Login to see your greeting</p>
</div>
dom-if is not necessary here. Simply use $= (attribute binding) to add/remove hidden attribute.
<style>
[hidden] {
display:none;
}
</style>
<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
<p>Login to see your greeting</p>
</div>
Use dom-if to make decisions about blocks of code that you don't want to be rendered, not just hidden.
I guess you could use dom-if to conditionally keep required HTML in DOM tree. properties should be defined there in properties of component.
<template is="dom-if" if="{{authenticated}}">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
<p>Login to see your greeting</p>
</template>
True and False will work once you add template with in template. I tried
<template>
<template is="dom-if" if="{{authenticated}}">
{{authenticated}}
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
{{authenticated}}
<p>Login to see your greeting</p>
</template>
</template>
If you will not add template with in template True, false will never work. It will always show you the first template wheather you have True or False value of properties.
Hope it works.
I'm writing a custom <figure>-like element for which I'd like to put a <figcaption> under the main content. The <figcaption> needs to include some content (text with potential formatting) from the child nodes of the custom element, for which I'm using <content select="span.caption"></content>. However, per the Shadow DOM spec, the <span> has already been distributed to the earlier <content></content> element that laid out the body of the custom element.
I've tried using <content select=":not(span.caption)"></content> to avoid distributing the caption, but that appears not to be a compound selector and matches nothing.
What's the recommended way to get the elements to render in the order I want?
Here's the code with the problem, which is also at http://jsbin.com/vizoqusu/3/edit:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<meta charset="utf-8">
</head>
<body>
<polymer-element name="my-figure" noscript>
<template>
<figure>
<content></content>
<figcaption>Figure 7: <content select="span.caption"></content></figcaption>
</figure>
</template>
</polymer-element>
<my-figure>
Hello World!
<span class="caption">The caption</span>
</my-figure>
</body>
</html>
This actually does work today under ShadowDOM polyfill, with two caveats:
:not only takes simple selectors as arguments, so you need to do something like *:not(.caption)
If you use a selector at all, plain text nodes are ignored, so you have to wrap your other content in some kind of element.
Here is an example:
http://jsbin.com/vizoqusu/5/edit
<polymer-element name="my-figure" noscript>
<template>
<figure>
<content select="*:not(.caption)"></content>
<figcaption>Figure 7: <content select="span.caption"></content></figcaption>
</figure>
</template>
</polymer-element>
<my-figure>
<span>Hello World!</span>
<span class="caption">The caption</span>
</my-figure>
As for the native system, I used your use case to argue for inclusion of :not() into the specification, you can see it here:
https://www.w3.org/Bugs/Public/show_bug.cgi?id=24867
I see a few options here:
You could use getDistributedNodes to first get the content of the element and then inject the text (Hello World) and caption at the right points as follows:
<polymer-element name="my-figure">
<template>
<figure id="figureHolder">
<content id="content"></content>
<figcaption>Figure 7: <content id="caption" select="span.caption"></content></figcaption>
</figure>
</template>
<script>
Polymer('my-figure', {
caption: '',
ready: function() {
var nodes = this.$.content.getDistributedNodes();
this.$.caption.innerHTML = nodes[1].innerHTML;
this.$.content.getDistributedNodes()[0].data = nodes[0].data;
this.$.content.getDistributedNodes()[1].innerHTML = '';
}
});
</script>
</polymer-element>
<my-figure>
Hello World!
<span class="caption">The caption</span>
</my-figure>
You could move your caption into an attribute and this allows you to maintain a clean separation between the content of your figure and the caption itself:
<polymer-element name="my-figure" attributes="caption" noscript>
<template>
<figure>
<content></content>
<figcaption>Figure 7: {{caption}} </figcaption>
</figure>
</template>
</polymer-element>
<my-figure caption="The caption">
Hello World!
</my-figure>
You could move your main content (e.g Hello World) into it's own span and add a class to allow targeting it from inside your template directly, so:
<polymer-element name="my-figure" noscript>
<template>
<figure>
<content select="span.hello"></content>
<figcaption>Figure 7:
<content select="span.caption"></content></figcaption>
</figure>
</template>
</polymer-element>
<my-figure>
<span class="hello">Hello World!</span>
<span class="caption">The caption</span>
</my-figure>