Lets assume I have two routes which require two different css as follows.
/home
needs
<head>
<link rel="stylesheet" href="/home.css">
</head>
And
/dashboard
needs
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
I can't put both css in same head file as they are conflicting. I can't do something as below.
<head>
<link rel="stylesheet" href="/home.css">
<link rel="stylesheet" href="/dashboard.css">
</head>
Is there any way to put different css for different route's in head?
Note: I need css in head to avoid glitch.
You can use different layouts for the two routes.
<template name="css1">
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
<template name="css2">
<head>
<link rel="stylesheet" href="/home.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and use it in the layout option for the route like:
this.route('path to css1', {
path: '/',
layoutTemplate: 'css1',
template: "css1 template"
});
Or alternatively:
You could do:
<template name="layout">
<head>
{> yield region="css"}}
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
this.route('path to css1', {
path: '/',
layoutTemplate: 'layout',
template: "css1 template"
yieldTemplates: {
'temple having css1': {to: 'css'}
}
});
Meteor compiles all your CSS in a way similar to Rails' asset pipeline.
Your question is coming from a non-single page app mindset.
You can put different stylesheets for different pages, in a multiple page site. But how will this work for an app that is only one page?
Instead, you should scope your style rules.
IE, instead of .container { color: blue }, do something like .container .home-container { color: blue }.
Related
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
I am building an app with Polymer. I am trying to layout my app using iron-flex-layout. In theory, it makes sense to me. However, practically, I can't seem to make it work with nested elements. Currently, I have the following:
index.html
<html>
<head>
<title>My App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/components/polymer/polymer.html">
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<!-- End of Polymer -->
<link rel="import" href="app.html">
<link rel="import" href="page-home.html">
<link rel="import" href="page-login.html">
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="vertical layout">
<div><h2>Hello</h2></div>
<app-shell flex></app-shell>
</div>
</body>
</html>
The app.html referenced above looks like this:
app.html
<dom-module id="app-shell">
<template>
<style>
:host {
background-color:lightsalmon;
}
</style>
<!-- Determine which view to load -->
<h3>Enjoy!</h3>
<neon-animated-pages flex id="pages" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<page-home></page-home>
<page-login></page-login>
</neon-animated-pages>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'app-shell',
properties: {
selectedPageIndex: {
type: Number,
value: 0
}
}
});
</script>
And, just to provide an example of one of the pages, I have:
page-home.html
<dom-module id="page-home">
<template>
<style>
:host {
background-color:lightyellow;
}
</style>
<div class="vertical layout center-justified">
<h4>Welcome to My App!</h4|>
<h5>I hope you like it!</h5>
</div>
</template>
<script>
Polymer({
is: "page-home"
});
</script>
</dom-module>
The above code isn't behaving how I would expect. The colors don't align with the element hierarchy. In addition, the main content isn't centered vertically or horizontally at all. In an effort to learn how Polymer Elements work, I'm trying to create a layout that looks like this:
+-----------------------------------------------+
| Hello * |
+-----------------------------------------------+
| Enjoy! ** |
+-----------------------------------------------+
| |
| |
| |
| Welcome to my App! |
| I hope you like it! |
| |
| |
| |
+-----------------------------------------------+
I was expecting the part with one star (*) to be light coral. Then, the part with two stars (**) to be light salmon. Finally, the main part of the app to be light yellow. However, the whole thing is light coral. I do not understand what I'm doing wrong. Does iron-flex-layout just not work? Or is there something I'm totally missing here?
Update:
Below is kind of an update showing the addition of the mixin. Even with this mixin added, I still get an error in the chrome console that says: /deep/ combinator is deprecated.
<html>
<head>
<style is="custom-style">
.horizontal-layout {
#apply(--layout-horizontal);
}
</style>
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="horizontal-layout">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
You need to apply the mixins, as described in the fresh new blog entry from Polymer: https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
I have a custom element called "datasource.html" which loads a json using iron-ajax. Now, I want to use the JSON data into "app.html" and eventually into "categories.html"
Then in app.html, I want to use this same value of myattr and transfer the same to categories.html.
Now, datasource.html prints the data on screen but categories.html shows nothing on the page.
What I want is that I load data in datasource.html once and then use the data anywhere in the project.
Trying to figure this out for last 2 days. Still got nothing.
Thanks in advance.
Here is my index.html file
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="lgelements/datasource.html">
<link rel="import" href="lgelements/app.html">
</head>
<body>
<dom-module id="landing-page" attributes="myattr">
<template>
<lg-datasource myattr="{{myattr}}"></lg-datasource>
<lg-app myattr="{{myattr}}"></lg-app>
</template>
</dom-module>
<script>
Polymer({
is: "landing-page",
});
</script>
<landing-page></landing-page>
</body>
</html>
Here is datasource.html
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="lg-datasource" attributes="myattr" hidden>
<template>
<iron-ajax url="../data.json" auto handleAs="json" last-response="{{myattr}}"></iron-ajax>
<template is="dom-repeat" items="[[myattr]]">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-datasource",
});
</script>
Here is my app.html
<link rel="import" href="categories.html">
<dom-module id="lg-app" attributes="myattr" vertical layout>
<template is="auto-binding">
<h1>[[myAttr]]</h1>
<lg-categories myattr="{{myattr}}"></lg-categories>
</template>
</dom-module>
<script>
Polymer({
is: "lg-app",
});
</script>
And here is categories.html
<dom-module id="lg-categories" attributes="myattr">
<template is="auto-binding">
<h2>MY NAME IS MANIK</h2>
<template is="dom-repeat" items="{{myattr}}">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-categories",
});
</script>
Use double curly brackets {{}} when you use the item inside the element with is="dom-repeat". So change it to:
<template is="dom-repeat" items="{{myattr}}">
<a href="{{item.url}}" target="_blank">
<h1>{{item.name}}</h1>
</a>
</template>
Also you should expose the myattr as a property and remove the template in datasource.html file.
Polymer({
is: "lg-datasource",
properties : {
myattr : Array
}
});
I have only skimmed your code, but I had the same kind of problem,... a child element that was the datasource and the parent that was supposed to display it. To get the data binding to work I needed to call _setPropertyName(data) in the child. Can't seem to find where this is documented but that's how its done internally in iron-ajax (look at the "loading" property).
I'm playing with Polymer 1.0 by creating a simple custom-element (ui-button).
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<dom-module id="ui-button">
<link rel="import" type="css" href="ui-button.css">
<template>
<button class="ui button">
<template is="dom-if" if="{{icon}}"><i class="icon">1</i></template>
<template is="dom-if" if="{{label}}">{{label}}</template>
</button>
</template>
</dom-module>
<script src="ui-button.js"></script>
Everything works fine in Chrome, but in Firefox the button has no styling.
My guess is that the problem is the external stylesheet, because when i put the CSS inline (style-tag)...it works.
Is this a bug in Polymer 1.0?
I really want to use the external stylesheet...
This is working for me in both Chrome and Firefox. This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheet.css">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/app/general/your-element.html">
</head>
<body>
<your-element></your-element>
</body>
</html>
Inside the element, I'm using the css class / id references just like you would on any regular html tag. So, inside of your-element looks something like this:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="your-element">
<template>
<span class="some_class_style">Hey, I'm stylish!</span>
</template>
<script>
Polymer({
is: 'your-element',
...
});
</script>
</dom-module>
And, it's styled by whatever you defined for some_class_style. Keep in mind, I've only made elements that are one level deep (ie. no children elements), but it seems to be working fine.
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.