Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<button class="button1" on-click="increment()">Click me</button><br />
<span>(click count: {{count}})</span>
<style scoped>
div[is=x-click-counter] span {
color: red;
}
</style>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
Related
I think I understand how placeholders work regarding select2 library.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
The reason is I like to place an icon at the placeholder.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
Is there a workarund for this?
#Marcos i have done some solution regarding placeholder regarding select2 library.
<select class="select2 selectPlaceholder" multiple="multiple"></select>
<script>
$(".selectPlaceholder").select2({
placeholder: "Select Product",
allowClear: true
});
</script>
Optional
allowClear: true
Please let me know if i am right because i got your question but still i have some doubt
understanding Que.
Taking your previous comment as a reference:
"the idea is to place a font awesome icon at the placeholder and
preventing select2 from escaping it, and i'm getting the i tag instead
of the icon"
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
grails 3 comes with bootstrap 3. I want to create my own main.gsp layout based on grails 4, i.e. replace the default main.gsp with something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
<title><g:layoutTitle default="DAM"/></title>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
At the bottom of the default main.gsp is this:
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
The question is, should I include these? In all my years using grails, I have never seen a spinner appear in the UI, so am not sure if this actually works?
I am guessing I don't want application.js?
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
The question is, should I include these?
Only if you ever want to display the spinner. The default main.css defines a style for the spinner:
.spinner {
background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
height: 16px;
width: 16px;
padding: 0.5em;
position: absolute;
right: 0;
top: 0;
text-indent: -9999px;
}
Adjust that however you find appropriate.
The default sitemesh layout contains a div with that style and has the display set to none so it won't be displayed.
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
A typical use of this is if you have some Javascript which does an action such that you want to display the spinner while that action is happening, that Javascript can set that display attribute and that will cause the spinner to be displayed until something sets that attribute back to none.
In all my years using grails, I have never seen a spinner appear in
the UI, so am not sure if this actually works?
It does unless you have made some changes that might interfere with that.
I am guessing I don't want application.js?
It is hard to say if you want that or not. It really depends on what your app is doing. The default application.js for a 3.3.9 app pulls in several other .js files...
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery-3.3.1.min
//= require bootstrap
//= require popper.min
//= require_self
If you don't want those pulled in then you may not want application.js. Of course you can edit application.js to include whatever it is that you do want to pull in.
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
That element is there as a placeholder for you to render common footer elements.
I'm trying to create custom-tabs web-component using polymer-dart. The component itself is a tab container, which can have a custom-tab elements inside of it.
I want to have an html like this:
<custom-tabs selected="three">
<custom-tab name="one">... content skipped ...</custom-tab>
<custom-tab name="two">... content skipped ...</custom-tab>
<custom-tab name="three">... content skipped ...</custom-tab>
</custom-tabs>
In custom-tabs html file I want to have something like this:
<polymer-element name="custom-tabs">
<template>
<div class="tabs">
<content select="custom-tab"></content>
</div>
<nav>
For each of custom-tab I want to create tab header (link) here
</nav>
</template>
</polymer-element>
Is it possible to:
For each custom tab inserted into .tabs create link inside div?
If custom-tab element has a property named 'caption', can I get it using some kind of {{attribute-name}} syntax?
Finally I want to look the component like this:
P.S. I only need help on polymer-dart <template> syntax, I can deal with css myself. Thanks in advance!
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="custom-tabs">
<template>
<style>
:host {
display: block;
}
</style>
<nav>
<template repeat="{{tab in tabHeaders}}">
<div>{{tab}}</div>
</template>
</nav>
<div class="tabs">
<content id="content" select="custom-tab"></content>
</div>
</template>
<script type="application/dart" src="custom_tabs.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
import 'dart:html' as dom;
#CustomTag('custom-tabs')
class CustomTabs extends PolymerElement {
CustomTabs.created() : super.created() {}
#observable
// toObservable() is to make Polymer update the headers (using template repeat) when the tabs list changes later on
List<String> tabHeaders = toObservable([]);
attached() {
super.attached();
// initialize the header list when the custom-tabs element is attached to the dom
updateTabHeaders();
}
// needs to be called every time the list of custom-tab children changes
void updateTabHeaders() {
tabHeaders.clear();
// the content element needs to have the id 'content'
($['content'] as dom.ContentElement).getDistributedNodes().forEach((e) {
// you can skip elements here for example based on attributes like 'hidden'
tabHeaders.add((e as dom.Element).attributes['name']);
});
}
}
I'm having a hard time getting my polymer custom element to render content within a container <div> without the <div> showing up in the light DOM.
<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exitAnimation entryAnimation">
<link rel="stylesheet" href="animate-custom.css">
<template>
<style type="text/css">
...
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
...
</script>
</polymer-element>
renders as
<impress-slide>
<div> (Content) </div>
</impress-slide>
Can anyone give me some insight into how I can render the containing <div> in shadow DOM?
It depends on what browser & version you're using. Some of them have old versions of the Shadow DOM spec, and so Polymer has to polyfill it instead of using it natively to get the features it needs.
I'm using Chrome 33.0.1750.22 dev and Shadow DOM is still polyfilled for me unless I turn on the "Enable experimental Web Platform features" flag in about:flags.
Include
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
before polymer import to enable custom elements to render inside shadow dom aka #shadow-root
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.