I am having the same issue as Polymer 3 - Google Maps. After reading the above thread, I seem to be missing the two files google-apis/google-maps-api.js and google-map-marker.js.
In the hope it would download all the dependent files for Google Maps I issued these commands:
npm install #em-polymer/google-map
npm install google-maps
npm install
What am I doing wrong?
This worked for me.
import { html } from '#polymer/lit-element';
import '#em-polymer/google-map/google-map.js';
import '#em-polymer/google-map/google-map-marker.js';
import { PageViewElement } from './page-view-element.js';
// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
class MyView1 extends PageViewElement {
render() {
return html`
${SharedStyles}
<section>
<h2>Static page</h2>
<p>This is a text-only page.</p>
<p>It doesn't do anything other than display some static text.</p>
</section>
<section>
<style>
google-map {
height: 600px;
}
</style>
<google-map latitude="39.84143133531688" longitude="-117.4895451470561" api-key="1234"></google-map>
</section>
`;
}
}
window.customElements.define('my-view1', MyView1);
Related
I'm trying to override the primary color in Bootstrap but it just doesn't work. Btw I'm using NextJS.
This is my "globals.scss" which I have imported in "_app.js".
$primary: black;
#import 'bootstrap/scss/bootstrap';
And I have imported Bootstrap in index.js like this
import 'bootstrap/dist/css/bootstrap.css'
I tried looking it up but everything I tried didn't work.
What I've tried:
Importing functions, variables, and mixins from Bootstrap SCSS.
Rearranging the imports.
Importing bootstrap/scss/bootstrap.scss to "_app.js"
But I've noticed that in the inspector it says my primary color is black but then right above it changes back to the original:
Below:
Above:
How to override Bootstrap variables in a Next.js project
Let's create an app and try to change the $primary color from default to black.
App structure:
Code:
index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href='https://nextjs.org'>Next.js!</a>
</h1>
<button type='button' className='btn btn-primary mt-4'>Primary</button>
</main>
</div>
)
}
_app.js
import '../styles/globals.css'
import { useEffect } from 'react'
function MyApp({ Component, pageProps }) {
useEffect(() => {
require('bootstrap/dist/js/bootstrap.bundle.min.js');
}, []);
return <Component {...pageProps} />
}
export default MyApp
globals.scss
$primary: black;
#import '../node_modules/bootstrap/scss/bootstrap';
Screenshot:
I think the problem of your codes is about the order of importing files. If you use globals.scss file to change bootstrap default values, Then you must import that file after your main bootstrap file. I'm not sure about the project structure you have, but for example if you imported Bootstrap in index.js file, change that file from just this:
import 'bootstrap/dist/css/bootstrap.css'
To something like this:
import 'bootstrap/dist/css/bootstrap.css'
import 'your/path/to/globals.scss'
Maybe that overrides the bootstrap file with your custom file.
Dear Polymer community,
I am having a hard time to learn polymer and follow the docs and tutorials on the web.
I am an experienced server-side C++ and Java developer. But my relationship with front-end and web development has never been smooth.
Maybe that is because web development keeps changing at a very fast pace and the docs and tutorial assume the user comes with a baggage of experience from previous web framework.
A few years ago I had to implement a web interface to the embedded box my team was working on. I did the web component using bootstrap and AngularJs. I really enjoyed that side project and was a breeze of fresh air compared to writing c++ for the embedded platform. I also really liked how AngularJs applied the MVC pattern to the web page.
Fast forward to the present, now google polymer and web components are the new fashion trends.
Went through the polymer tutorial and read a bit about web components. I think it is a great idea to reuse web components. Just browse the huge library of existing web components, pick and choose what you want. Sounds good in theory ... except ... the newbie like me has been unable for the entire day to use a single web component correctly so far.
I find the docs lacking and the sample code inaccurate. Let me go through a simple example. One of the web component I want to use is iron-pages. Awesome web component and that is exactly what I need !
I read the docs for iron-pages and looked at the demo on webcomponents.org and now is the time to use it. Except I cannot get the thing to work.
Here is exactly what I did on the command line by using the polymer-cli
mkdir my-app
cd my-app
polymer init
I chose the polymer-2-application
I try my app
polymer serve --open
Hurray it shows Hello my-app-app! on the webpage
Next I try to use the iron-pages web component. So I need to download that component using bower
bower install --save PolymerElements/iron-pages
The demo for iron-pages is listed here along with the sample code. But the sample code does not match what should appear in a web component ... or at least what I read so far in the tutorials for using a webcomponent.
There is no tag in that sample code. There is a tag which should not be there. I am sure an experienced web developer would know how to bridge the gap ... but not me.
I tried my best to adapt that iron-pages sample code to fit into my file src/my-app-app/my-app-app.html
Here is my code:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected="0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
</template>
<script>
/**
* #customElement
* #polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
</script>
</dom-module>
The iron-pages do not appear on the web page. The developer console on chrome shows an error that I am trying to do addEventListener on a null pointer. So I tried to comment out the addEventListener portion. I expect to still see one of the iron-pages even if I can't click to rotate among the pages. But the iron pages still don't appear at all.
I would appreciate if one of you experienced web devs could enlighten me. I have other examples of other web components I could not use perfectly such as app-toolbar, I could not get the iron-icon to appear ... even if I bower install iron-icon. Anyhow, I would be happy if I could start by getting my iron-pages hooked up.
Remove the quotes and use like : bower install --save PolymerElements/iron-pages
instead of : bower install --save PolymerElements/'iron-pages'
And also all single quotes in your code 'iron-pages'
just use iron-pages
DEMO
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected="0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<script>
/**
* #customElement
* #polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
You are getting null pointer becouse of setting an event outside of your class.
No code should be there except the class registration (customElements.define...)
Generally in Polymer you should set listeners in the ready callback.
Custom element lifecycle here: https://www.polymer-project.org/2.0/docs/devguide/custom-elements
In your case:
ready() {
super.ready();
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
}
Is there a way to import external css files that only affects the shadow DOM? I am working with sass and creating the css files automatically, so any tricks using javascript imports can't be done.
Right now, what I have is:
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
....
}
In Polymer 2, it was possible to do something like:
<dom-module id="my-app">
<link rel="stylesheet" href="style.css">
<template></template>
</dom-module>
Is there a Polymer 3 way of acheving the same thing?
You can use variables in html-tag, like this:
import { htmlLiteral } from '#polymer/polymer/lib/utils/html-tag.js';
import myCSS from "style.css";
let myCSSLiteral = htmlLiteral(myCSS);
...
class MyElement extends PolymerElement {
static get template() {
return html`<style>${myCSSLiteral}</style>...`;
...
}
...
}
Please note: You have to convert variable from string to a htmlLiteral for using it in html-tag, though I do not know why Polymer does not support raw string variable directlly. good luck!
this works great for me!
return html`
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<style>
/* I had to put !important to override the css imported above. */
</style>
<divclass="blablabla"></div>
`;
Inspired by this html5rocks post, I thought I'd try link rel="import".
In the console, I get:
yay!
Loaded import: http://www.example.com/HelloWorld.htm
But I don't get "Hello World!" on the page.
Here's my code:
<!DOCTYPE html>
<html>
<body>
<script>
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
console.log('yay!')
} else {
console.log('boo!')
}
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)">
</body>
</html>
And HelloWorld.htm contains:
<h1>Hello World!</h1>
Edit:
In the console, I can see that <h1>Hello World!</h1> is inside the link tag as another #document, complete with <html><head></head></body>.
According to the same HTML5Rocks post, when you import an HTML resource, it is accessible as a JavaScript object. Specifically, a Document:
var myImport = document.querySelector('link[rel="import"]').import;
document.querySelector(/* get the element we want here */).appendChild(myImport.body);
That does contradict somewhat with the beginning of the article, which balks at using JavaScript to load HTML, but at least it uses much less JavaScript (the kind that can, perhaps, fit in a browser tag) and certainly is not subject to the CORS restrictions that AJAX has to deal with.
I'm trying to create the structure of a basic Meteor app with React:
This is the main.html
<head>
<title>test</title>
</head>
<body>
<div id="render-target"></div>
</body>
this is the startup function
Meteor.startup(function () {
ReactDOM.render(<AppLayout />, document.getElementById("render-target"));
});
and this is the app layout
AppLayout = React.createClass({
render() {
return (
<div className="wrapper">
{this.props.nav}
{this.props.content}
{this.props.footer}
</div>
)
}
});
from what I understand the
ReactDOM.render(<AppLayout />, document.getElementById("render-target"));
should replace the div "render-target" with the AppLayout element (the "wrapper" div), but when i run the app, inside the body i see two div: the "render-target" and the "react-root".
As you can see here
why is the "render-target" div still there and the "wrapper" is duplicated?
EDIT:
the router part is
FlowRouter.route("/", {
name: "HomePageRoute",
action:function() {
ReactLayout.render(AppLayout, {
nav: <NavBar />,
content: <HomePageContainer />,
footer: <Footer/>
});
}
});
ReactDOM.render(<AppLayout />, document.getElementById("render-target"));
Will not replace the render-target id, that will always exist. As for the duplicate, I've never seen that "accidentally" happen. If you could show your whole code I'm almost certain we'll find that you have something else rendering to that element.
What packages are you using? What version of meteor? What router? Those are all important to know here.
In the end, I'd recommend using react-template-helpers for this as it's a lot more clear what's going on when using meteor + react. An example of it's usage is available from this meteor starter boilerplate.