i bower installed polymers paper-toggle-button element and use it as:
<paper-toggle-button></paper-toggle-button>
it look as it should but when i click on it, it doesn't toggle. and when i drag and let go, it jumps back. Same happens with the buttons in paper-toggle-button/demo/index.html from the bower_components.
Do i miss some other dependencies or have i to implement an onclick handler to toggle the checked attribute myself?
Try this:
<div class="line"><span>No</span><paper-toggle-button on-change="_toggleChanged" checked class="orange"></paper-toggle-button><span>Yes</span></div>
Then handle the change:
_toggleChanged: function(event){ if(event.target.checked){ console.log('i was toggled:' +event.target.checked)};
instaling the paper element i used the Polymer catalog's download option with bower. which was:
bower install --save PolymerElements/paper-toggle-button#^1.0.0
i assume it loades newer version of it dependencies which aren't compatible with it. Then i tried:
bower install --save PolymerElements/paper-toggle-button
and bower let me pick a version:
2) paper-toggle-button#~1.0.11 which resolved to 1.0.11
and now everything works fine.
Related
In PhpStorm 2019.3.4 I work with tailwindcss 2 In laravel 8 app and I installed tailwindcss plugins
I found : Tailwind Formatter, Tailwind CSS Smart Completions, Tailwind Intellisense
But I do not see any tailwindcss support in my PhpStorm in many cases when I need it. In blade.php file having line like
...
<div class="my-2 w-100 admin_content_text_color">
</div>
...
adding “ px” in end of class definitions I want to see autocomplete hint on existing tailwind
classes
Simialr in my custom resources/css/app.css
.editor_form_inactive_tab {
#apply text-gray-400y;
}
entering “text-red-” I do not see any autocomplete hint I expect.
In my webpack.mix.js I have :
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
Seems none of installed plagins I wrote above nned any additive options in setting ?
Thanks!
Official Tailwind support has been introduced in PhpStorm 2020.3 (see https://blog.jetbrains.com/webstorm/2020/11/webstorm-2020-3/), you can't expect it to work in v.2020.2. Please consider upgrading
I am using Create-React-App and I want to add background image for my header section and I am doing this in that way:
background-image: url('~/Screenshot_11.png');
After this I'm getting this error:
./src/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss)
Module not found: You attempted to import
../../../../../../../Screenshot_11.png which falls outside of the
project src/ directory. Relative imports outside of src/ are not
supported.
I've set up homepage in package.json
"homepage": "http://localhost:3000",
In my older projects that works but today I cannot import this correctly.
They have changed that but I don't know why. Working path:
background-image: url('/Screenshot_11.png');
EDIT 2021
For people who think that it doesn't work:
https://codesandbox.io/s/agitated-turing-gsnr3
you can import that image as
import Background from './Screenshot_11.png'
and use
background-image: `url(${Background})`
This still does not work for me with images in the public folder.
UPDATED 19 March 2021
Regarding using of <ROOT/public/images> in .css files.
It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.
Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).
No fixes (yet). (will be?..)
But a few workarounds mentioned there.
Which one to use... it depends on your project, I suppose.
Some of workarounds:
downgrade to react-scripts 3.4.x
don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.
reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired
(you can find sample configurations at the github issue page)
use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264
(released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )
I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!
I have a Polymer application for which I am getting the following warning:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.
So I did a bower update to my components. Here is the relevant part of my bower.json file:
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-input": "PolymerElements/iron-input#~1.0.6",
"neon-animation": "PolymerElements/neon-animation#~1.0.7",
"google-map": "GoogleWebComponents/google-map#~1.1.4",
"paper-elements": "PolymerElements/paper-elements#~1.0.5",
"iron-form": "PolymerElements/iron-form#~1.0.11",
"Autolinker.js": "~0.22.0",
"paper-checkbox": "PolymerElements/paper-checkbox#~1.1.3",
"masonry": "^4.1.0"
}
and now I am getting another error,
This file is deprecated. Please use iron-flex-layout/iron-flex-layout-classes.html, and one of the specific dom-modules instead
which was inserted directly as a console.warn() when polybuilding my application. No, it does not say what "this file" is that's deprecated.
Not sure if these warnings are in any way related to the new issue I've created for myself by doing the bower update, namely that the paper-input in my modal form no longer works and has a weird halo around it:
Any ideas what is causing the error? Is it related to the warnings?
I am using the following Gulp task to copy required fonts from the Font Awesome Bower package, this works fine and outputs files like so:
App > Build > Fonts > Font Files
gulp.task('copyfonts', function() {
gulp.src('./bower_components/components-font-awesome/fonts/**/*.{ttf,woff,eof,svg}')
.pipe(gulp.dest('./fonts'));
});
I am trying to refactor this task so that it moves the fonts from any bower package (Bootstrap, for example) using the ** wildcard.
gulp.task('copyfonts', function() {
gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eof,svg}')
.pipe(gulp.dest('./fonts'));
});
App > Build > Fonts >
Bootstrap > Fonts > Font Files
Font-Awesome > Fonts > Font Files
TL;DR
Using my second method is copying the files as shown above, copying over the package folder and moving that with a 'fonts' folder as a child. Could anyone help show me where I have gone wrong...
I'm a little late to the party here, but for anyone that stumbles upon this in the future: I believe you have a typo in your font glob: eof should be eot.
gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eof,svg}')
should be
gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eot,svg}')
Not the best idea to always rely that a package will keep fonts in specific folders, those things can change.
Possibly you're missing another /**/ before fonts (one folder level). Or why all those checks, you know what extensions fonts will have, perhaps add wildcard like **/*.{ttf,woff,eof,svg}
Have you ever tried managing it with gulp-main-bower-files? https://github.com/ck86/main-bower-files
you can test this task
i worked by it
gulp.task('copyfonts', () =>
gulp.src('./app/assets/fonts/*')
.pipe(gulp.dest('./dist/assets/fonts'))
);
I ran into this same issue. After running my gulp builds, my fonts never successfully copied to my dest/fonts folder. The issue was inside my gulp.js file on these lines:
function fonts() {
return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
.pipe($.if(!isProd, dest('.tmp/fonts'), dest('dist/fonts')));
};
After editing the last line, my fonts successfully copied over!
function fonts() {
return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
.pipe(dest('dist/fonts'));
};