I don't know how to insert Polymer tags and UI components to Jade file, how to render it, or how to add the necessary script on the site. Can you help me with that?
Load up webcomponents polyfills
script(src="bower_components/webcomponentsjs/webcomponents.js")
Import Polymer and the element you want to use.
link(rel="import" href="../bower_components/polymer/polymer.html")
link(rel="import" href="bower_components/paper-button/paper-button.html")
Then create instances of it in your jade template.
paper-button() flat button
paper-button(raised) raised button
paper-button(noink) No ripple effect
Related
Is it really that slow? Should it be so, or something's wrong with my implementation?
P.S. 2 input fields form with one button.
Without styled-components: (523ms Scripting)
With styled-components: (3161ms Scripting)
Yes, Styled Components is slow because it's a CSS-in-JS solution. This means your page must go through these steps:
page is loaded;
JavaScript code is parsed;
CSS is generated;
CSS is injected into components;
browser renders the CSS.
When you have plain CSS files (like when you use CSS modules), the steps are:
page is loaded;
JavaScript code is parsed; browser renders CSS in parallel.
Styled Components gives you the powerful ability to inject code dinamically into the CSS, but there is no free lunch: and the cost here is performance. In the long run, the best solution to me seems to be SCSS modules (that is, CSS modules combined with SCSS).
Then, if you need to inject code into the CSS, simply set CSS --variables dinamically.
I am using the application layout control from the extension library. In my application banner links I would like to include icons from font-awesome but I do not manage to achieve this.
Someone to the rescue?
Balassaitis says everything I was going say only better and with pictures: https://xcellerant.net/2014/04/07/implementing-font-awesome-4-0-3-in-xpages/
NOTE: the FA classes don't work with the img tag. Use the i tag in your source instead.
I am trying to create a custom element that extends a SVGGlement. Here is the JSBin link to the code: http://jsbin.com/kovumoloda/2/edit?html,console,output
When I run the code, ready() isn't called and so aren't the contents of the Shadow DOM rendered.
I tried the same example without Polymer and it worked. Here is the JS Bin link http://jsbin.com/vihosojofi/1/edit?html,console,output
Is there anything I need to do differently to make this thing work with Polymer ?
Thanks !
I'm trying to create a CSS documentation library in Orchard. I want to save a description, CSS snippet and HTML snippet against each content type. The first view would show the description and CSS and HTML code written out. The second view would show a preview of what the CSS and HTML look like rendered.
cssdocumentation.com/content/item1
cssdocumentation.com/content/item1/live-preview
I've created the content type and the first view. But I'm not sure how to create the second view. I can see if I can create the alternative URL I can use the Url Alternates module to create an overriding .cshtml
To create an alternative URL I've looked at the autoroute module but this only allows you to adapt a single URL (unless I'm missing something?) and I've looked at Alias UI but this forces me to manually create an alternative URL everytime I create a content item.
Is this possible in Orchard without writting too much C#? (I'm a frontend developer so I only dabble in the behind the scenes stuff)
Thanks for any help
Best solution is to do this within your own module. But as a secondary option instead of having a second page, combine this content with your first page and hide it with CSS. When the user clicks a button to navigate to the next step render the CSS/HTML result on the same page. You can do this in many ways, here are a few ideas:
Render the CSS/HTML result out straight away on the same page but hide it. Show it when the user clicks a button
using jQuery to render the result on the client side. More dynamic if you allow editing of the HTML and CSS.
Redirecting the user to the same page with specific url parameters which you can pick up in your alternate to modify the output.
Sometimes I want to add some custom CSS or Javascript to a page but the HTML editor doesn't handle this gracefully, even when using text dialog.
I could use an alternate view but then I have to upload the view file to my host every edit.
Any ideas?
Ok, I found a module (Vandelay.Classy) that does exactly this.
http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Classy