If I create this code in Emmet.sublime-settings
"jqo": "<script src='//code.jquery.com/jquery-1.11.0.min.js'></script>$1"
It's works.
But
"bs" : "<link rel='stylesheet' href='1.min.css'>
<link rel='stylesheet' href='2.min.css'>$1",
Or
"bs" : "<link rel='stylesheet' href='1.min.css'> \n <link rel='stylesheet' href='2.min.css'>$1",
It does not work
How create multi-line snippet?
See http://docs.emmet.io/customization/snippets/
In your case, you should either create alias:
{
"abbreviations": {
"bs": "link[href=1.min.css]+[link[href=2.min.css]"
}
}
...or text snippet:
{
"snippet": {
"bs": "<link rel='stylesheet' href='1.min.css'>\n<link rel='stylesheet' href='2.min.css'>"
}
}
Sergey Chikuyonok is correct, but there's a surplus square bracket in his answer.
This works as expected:
{
"abbreviations": {
"bs": "link[href=1.min.css]+link[href=2.min.css]"
}
}
But if you need another line break between the two link elements, you can do it like this
{
"abbreviations": {
"bs": "link[href=1.min.css]+{${newline}}+link[href=2.min.css]"
}
}
Reference: https://github.com/emmetio/emmet/issues/285
Related
Hi I am trying to create a jquery.terminal. I tried to follow this article, here it uses the body tag, I wish to use only a div for the terminal area not the whole body. Tried accessing the <div id="myterm"></div> like
<script>
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
</script>
But didn't work !
Yes it does work.
Try hello world on the prompt
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
#myterm {
height: 300px;
border: 1pxs solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/js/jquery.terminal.min.js" integrity="sha512-lfkU/Qku0yOVZEYANlw2mOv7fpHFdS1E62UT7vJ55k22OB+xgRNNa6Cdor4Lugl4jhDjX29lJAG12X/OHFe8JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/css/jquery.terminal.css" integrity="sha512-lT1/Sb6Bu4LaJJoTsxNZnlvt7pjuntBoSqSMJY7MxG5Yl1XgxsXA6jcJinPU0lx5eEsnudBE1ubzHSYR/W8xTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="myterm"></div>
I have a sass file that I want to override the existing stylesheet but I'm unable to see the sass override when I inspect in the browser. I included a screen shot that doesn't show the design system and override:
_titlebar.scss - variable used from design system.
.ui-dialog.active-dialog:not(.ui-dialog-minimized) .ui-dialog-titlebar {
background-color: var(--linq-color-primary-500);
}
_index.css
#import './_status.scss';
#import './_titlebar.scss';
I use a design system in the application that include the core file, a theme file and the material design theme. I removed part of the https for the design system for security reasons below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Alio</title>
<link href="app/alio/img/LINQ-logo.svg" rel="shortcut icon" />
<script src="runtime/js/bootstrap.js"></script>
<link href="runtime/css/frames-loader.css" rel="stylesheet" />
**<link href="https://.../theme/blueberry-muffin.css"
rel="stylesheet" media="all" />
<link href="..../snackpaq-core.css"
rel="stylesheet" media="all" />
<link href="https://.../material-theme.css"
rel="stylesheet" media="all" />**
<title></title>
</head>
<body>
<script type="text/javascript">
bs_init();
</script>
gruntfile.js
module.exports = function (grunt) {
var env = grunt.option('env'); // i.e.: --env develop
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*\n' +
' * <%= pkg.name %>\n' +
' * \n' +
' * Version: <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n' +
' * Copyright <%= grunt.template.today("yyyy") %> MORPHIS - http://www.morphis-tech.com/\n' +
' */\n',
sass: {
css: {
options: {
sourcemap: env == 'develop' ? 'auto' : 'none'
},
files: {
'css/expanded-default.css': 'scss/expanded-default.scss',
'css/expanded-light.css': 'scss/expanded-light.scss',
'css/expanded-light-rtl.css': 'scss/expanded-light-rtl.scss',
'css/expanded-dark.css': 'scss/expanded-dark.scss',
'css/expanded-dark-rtl.css': 'scss/expanded-dark-rtl.scss',
'css/expanded-purplelight.css': 'scss/expanded-purplelight.scss'
.....
}
}
},
cssmin: {
options: {
banner: '<%= banner %>',
},
css: {
files: {
'css/light.min.css': ['css/light-rtl.css'],
'css/light-rtl.min.css': ['css/light-rtl.css'],
'css/dark.min.css': ['css/dark-rtl.css'],
'css/dark-rtl.min.css': ['css/dark-rtl.css']
}
}
},
watch: {
sass: {
files: [
'scss/**/*.{scss,sass}',
'widgets/**/*{scss,sass}',
'../base/scss/**/*{scss,sass}',
'../base/widgets/**/*{scss,sass}'
],
tasks: ['sass:css']
},
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'cssmin']);
};
Can someone please provide a reason why and a solution to what I need to do to get the the sass override to work properly.
I am trying to bind local properties.json and trying to create dynamic elements, but the problem is I am not getting any console errors and not seeing JSON in the UI.
I didn't find a Polymer 2.0 example for using <iron-ajax>, but I found ones for Polymer 1.0 only.
Here's the code I've tried:
polymer-input.html
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">
<dom-module id="polymer-app">
<template>
<style>
:host {
display: block;
}
</style>
<iron-ajax auto="" url="properties.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="[[ajaxResponse]]">
<span>[[item.name]]</span>
</template>
<h2>Hello [[prop1]]!..[[ajaxResponse]]</h2>
</template>
<script>
/**
* #customElement
* #polymer
*/
class PolymerApp extends Polymer.Element {
static get is() { return 'polymer-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymer-app'
}
};
}
}
window.customElements.define(PolymerApp.is, PolymerApp);
</script>
</dom-module>
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer</title>
<meta name="description" content="custom ele">
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer-app/polymer-app.html">
<link rel="import" href="polymer-input/polymer-input.html">
</head>
<body>
<polymer-app></polymer-app>
</body>
</html>
properties.json:
{
{
name:"Name",
type:"string",
size:20
},
{
name:"Age",
type:"number",
size:20
}
}
I am getting below output instead of properties json data
The first problem is your demo uses a base URL for Polymer 0.5, while your code is using Polymer 2.0 syntax.
That is, this code:
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">
...should be something like this:
<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/iron-ajax/iron-ajax.html">
Second, your properties.json file contains invalid JSON. It looks like you meant to use square brackets for array data; and your keys are missing quotes. You'll notice that running the file contents through JSON.parse() would throw an error.
This text:
{
{
name:"Name",
type:"string",
size:20
},
{
name:"Age",
type:"number",
size:20
}
}
...should be something like this:
[
{
"name":"Name",
"type":"string",
"size":20
},
{
"name":"Age",
"type":"number",
"size":20
}
]
Third, note that <iron-ajax> automatically sets <iron-ajax>.lastResponse to null if <iron-ajax>.handleAs is json and the response cannot be parsed as JSON. In your case, the invalid JSON in properties.json would cause lastResponse to be set to null, preventing your example from rendering the intended fields.
Here's a working Polymer 2 <iron-ajax> demo (using your example code) with all corrections made:
http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview
I currently am trying to change the style of my page on the push of a button - the button is part of a dropdown. Everything I try does not seem to work,
here is what I'm trying:
Lead</li>
Have two <link /> tags defined like this:
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="onclick.css" disabled id="onclick" />
<link rel="stylesheet" href="offclick.css" disabled id="offclick" />
Using the jQuery, you can easily give the control to the following HTML:
Change Style
$(function () {
$("#style-change").click(function () {
if ($("#onclick").prop("disabled")) {
$("#onclick").prop("disabled", false);
$("#offclick").prop("disabled", true);
} else {
$("#onclick").prop("disabled", true);
$("#offclick").prop("disabled", false);
}
});
});
Hope this helps.
To begin with this line of code looks scary !
Lead</li>
If you want to change the style for a particular container ? or change the entire stylesheet ?
If later is the case, then you need to hold the current stylesheet value somewhere, may be in ViewBag or even Session. And then check when you are including in your layout, something on this lines..
#if(ViewBag.Style == "red")
{
Styles.Render("~Views/Customer/css/Hide.css");
}
else if(ViewBag.Style == "blue")
{
// you get the idea...
}
If you're willing to use JQuery you can do this within one line:
$("head").append("<link rel='stylesheet' id='extracss' href='"~Views/Customer/css/Hide.css"' type='text/css' />");
I am new to Emmet. Trying to create a custom abbreviation that expands to:
<link rel="stylesheet" href="http://www.domain.com/path/CSstyles.css">
<link rel="stylesheet" href="http://www.domain.com/path/CDstyle2.css">
<link rel="stylesheet" href="http://www.domain.com/path/DEstyle.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
so I can easily insert a set of styles and script for a site I work on a lot.
I am working in Sublime Text 3 and went to Sublime > Preferences > Package Settings > Emmet > Settings - User and added the following as a starting point:
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "<link rel=\"stylesheet\" href=\"http://www.domain.com/path/CSstyles.css\" />+<link rel=\"stylesheet\" href=\"http://www.domain.com/path/CDstyles.css\" />"
}
}
}
}
Which worked, but did not expand past the first style reference. I tried replacing the + with an n\t\ with the same results. I found an example online and plugged that in instead to see if that worked, but it still does not expand past the first element. What am I doing wrong? The documentation here doesn't really address multiple line snippets.
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "<div class=\"block\">\n\t<div class=\"text\">\n\t\t<h3>|</h3>\n\t\t<p></p>\n\t</div>\n</div>"
}
}
}
}
In your example, you are using abbreviations section which is actually parses provided single element HTML tag to use it as a reference for building output. And what you are trying to do is to create a regular text snippet. E.g. a chunk of arbitrary code.
If you read closer snippets.json section, you’ll see that given file contains abbreviations and snippets sections that has different meanings, described here.
In your example, you have to use either snippets section or use aliases in your abbreviations section:
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "link[href=http://www.domain.com/path/CSstyles.css]+link[href=http://www.domain.com/path/CDstyle2.css]"
}
}
}
}