I have a custom Polymer 2 video-player element and I want the ability to pass in a property to each element instance in order to define which stylesheet to apply to it (different theme names are released each year and each set of styles currently exist on the server in their own file which has a predictable naming format). I saw some examples with inline tags, but that seems to only be an acceptable solution for smaller styles (otherwise it gets out of control for me to jam all my styles in there, which there are a lot of). How can I do the theme-ing properly?
Here's what I got so far in two separate HTML files:
Demo File (demo-page.html)
<link rel="import" href="../my-video-player.html">
<my-video-player data="{...}" theme="2016"></my-video-player>
<my-video-player data="{...}" theme="2017"></my-video-player>
Component File (my-video-player.html)
<dom-module id="my-video-player">
<template>
<link type="css" rel="import" href="css/[[theme]]/styles.css">
</template>
<script>
class MyVideoPlayer extends Polymer.Element {
...
}
</script>
</dom-module>
Note: I tried putting the above link tag one level outside of the template tag as well, but that didn't work.
Right now what happens is only one of the two theme stylesheets get applied to both of my components. What I need instead is for the first component to get the 2016.css stylesheet applied to it, while the second gets the 2017.css stylesheet.
To add external stylesheets, you need to create a custom component that contains all the styles you want. Then, you can link the "style" component into the component(s) using the styles like this:
<link rel="import" href="/shared-styles.html">
<dom-module id="sus-app">
<template>
<style include="shared-styles"></style>
<style>
neon-animated-pages {
height: 500px;
}
neon-animatable {
padding-top: 2em;
padding-left: 10em;
padding-right: 10em;
}
Notice that you can still include styles unique to the component that she shared styles are being used with.
Related
We build a Vue component(using vuetify) into an existing .net MVC application.
The application loads the webpack into a div.
The problem is that the vue component inherits all the CSS of the existing application.
A simplified HTML version looks like this:
<html>
<head>
</head>
<body>
...
<div class="VUE_CLASS">
//vue component...
</div>
...
</body>
</html>
The Style is written in css.less.
I tried to exclude the VUE_CLASS from all CSS Rules of the existing application by applying a :not(.VUE_CLASS) and a div:not(.VUE_CLASS). I also tried to wrap it around all rules in the css.less:
*:not(.VUE_CLASS){
//...css rules of the existing application
}
It doesn't work
I read about some other strategies (https://kloudless.com/blog/2019/02/05/creating-a-reusable-vuetify-component-to-use-in-other-apps/). Using an iframe is not an option because we can't access our backed from an iframe. I can't use Web components as well, because we have to support ie11.
Is it possible to exclude the div and all its child elements using less?
Thank you & Best regards,
Finn
What if you just reset all CSS styles for VUE_CLASS selector?
Try adding this rule at the end of the <style> tag:
.VUE_CLASS {
all: unset !important;
/* Write the other styles for this component below */
}
Currently, I have to import css file conditionally depend on which kind of browser users are using. To not making css file global, I have the following code:
created() {
this.checkIsMobile()
},
methods: {
checkIsMobile(){
var isMobile = new MobileDetect(window.navigator.userAgent);
if (isMobile.mobile()){
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-pc.css">');
}else {
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-m.css">'); //must be load external css
}
},
It does not work because it's internal css.
I can not import in style tag because there are some link to other images in my css. Importing in style will lead to relative modules were not found
How should I do with without uploading css file to somewhere?
Edit: This question is theoretically the same as what I just did (without jQuery)
Vuejs compiles in a different way, so import or adding internal css file to head does not work. Simply use require:
if (isMobile.mobile()){
require('#/assets/css/mobile.css');
}else {
require('#/assets/css/pc.css');
}
Can you try the following method?
<style scoped>
#import './../file.css';
</style>
Source URL: https://forum.vuejs.org/t/how-to-import-css-files-into-single-file-component/41337
You shouldn't use JQuery. It is slow, big size and everything that you using jquery you can do in Vue.
Second, you shouldn't detect screen size in JS, but in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
So, i develop web app using Angular 7, one of the component however is using complex styling from old project, so i plan to just paste static HTML, CSS, and JS from static old project to one of the Angular component, how to do it?
i.e, I want to paste following HTML structure in Angular component:
<html>
<head>
...
...
<link rel="stylesheets"..
<link rel="stylesheets"..
<link rel="stylesheets"..
</head>
<body>
...
...
...
<script src="...
</body>
</html>
Notice that i need to use CSS and Script on that static page and only contained in single Angular component, i'm aware of declaring global CSS and JS that we need for our project in angular.json, however in this case i dont need global CSS or global JS, only contained on that one component, so, how to do it?
If you only want certain styles contained in a single Angular component then you can define then with inline styles on your template.
1) Wrap styles with style tag:
#Component({
template: `
<style>
h1 {
color: blue;
}
</style>
<h1>This is a title.</h1>
`
})
2) Normal inline styles in the template tags:
#Component({
template: '<h1 style="color:blue">This is a title.</h1>'
})
You can also include the script tags in your template to import a JS file whenever you're using this component.
3) Alternatively you can import the CSS files by using #import in your CSS file for the component:
#Component({
template: '<h1>This is a title.</h1>',
style: '#import url("custom.css");'
})
My idea is to have different files (either .css or .html) containing all the rules for a specific theme and load theme dynamically changing the look&feel of the Polymer application at runtime.
I have found pretty useful this method described here by Polymer itself with using custom style at document level (using .html files)
Frequently you want to define custom property values at the document level, to set a theme for an entire application, for example. Because custom properties aren't built into most browsers yet, you need to use a special custom-style tag to define custom properties outside of a Polymer element. Try adding the following code inside the tag of your index.html file
Basically we define an my-theme.html, that defines variables used in the application style, that looks like this:
<style is="custom-style">
/* Define a document-wide default—will not override a :host rule in icon-toggle-demo */
:root {
--icon-toggle-outline-color: red;
}
/* Override the value specified in icon-toggle-demo */
icon-toggle-demo {
--icon-toggle-pressed-color: blue;
}
/* This rule does not work! */
body {
--icon-toggle-color: purple;
}
</style>
And I import it in my index.html file.
And then I found on stackoverflow this method to change the style dynamically.
HTML
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
JS
document.getElementById('buttonID').onclick = function () {
document.getElementById('theme_css').href = '../red.css';
};
The problem here is that the file is a rel: stylesheet and changing its href causes the browser to reload the file and apply the changes, wherease in my case changin the href of the html import doesn't leed to the same effect.
Is there a way to get this to work as I want? Is there a better solution to achieve my goal?
Definitely, you have to use custom CSS properties and mixins. If you style your website correctly it will be very easy to swap to different theme.
You can change Custom CSS property value by doing:
this.customStyle['--my-toolbar-color'] = 'blue';
Every css rule that is using var(--my-toolbal-color) will change to color blue, once you call one ore function:
this.updateStyles();
which tells Polymer, hey i just updated styles can you re-render css rules..
Hope this helps and it's the thing you were looking for. Because what you described was too much complicated i think.
Not really happy with it but that work :
<link rel="import" href="my-css.html">
<dom-module id="my-app">
<template>
<style include="my-css"></style>
<button class="btn-primary-dark">Dark button</button>
<button class="btn-primary-light">Light button</button>
<button class="btn-primary-default">Default button</button>
<br><br>
<button on-click="setTheme1">Set theme 1</button>
<button on-click="setTheme2">Set theme 2</button>
</template>
<script>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
// Dynamicaly change vars
setTheme1() {
Polymer.updateStyles({
'--dark-primary-color' : '#689F38',
'--default-primary-color' : '#8BC34A',
'--light-primary-color' : '#DCEDC8',
'--text-primary-color' : '#212121'
});
}
setTheme2() {
Polymer.updateStyles({
'--dark-primary-color' : '#1f8f37',
'--default-primary-color' : '#818bbf',
'--light-primary-color' : '#f0e82f',
'--text-primary-color' : '#333333'
});
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>
my-css.html
<dom-module id="my-css">
<template>
<style>
.btn-primary-dark {
background-color: var(--dark-primary-color);
color: var(--secondary-text-color);
}
.btn-primary-light {
background-color: var(--light-primary-color);
color: var(--secondary-text-color);
}
.btn-primary-default {
background-color: var(--default-primary-color);
color: var(--secondary-text-color);
}
</style>
</template>
</dom-module>
I have many JavaScript Files and CSS Files referenced in the Layout file. Now I have a couple of views which are referencing some custom libraries which are interfering with the existing CSS files. So my question is can I somehow remove those references from these two views only or not allow them to load at all in the said views.
What you can do is, create a custom css file which overrides the existing styles from your regular (ex : bootstrap) css file. You can include this css files conditionally after your regular css styles in the views you want.
You may also use the !important attribute to explicitly override the values as needed.
So in your layout, add a new Section called CustomStyles
<head>
<!-- Existing css include goes heree -->
#RenderSection("CustomStyles", required: false)
</head>
And in your specific view, you can simply include the custom css file
#section CustomStyles
{
<link href="~/MyCustomCss.css" rel="stylesheet">
}
EDIT : As per the comment.
If you are ok to completely ignore the specific css files in some views, you can update your Layout to conditionally include/exclude those.
So in your layout
<head>
#if (ViewBag.IncludeBootStrap == null|| (bool) ViewBag.IncludeBootStrap !=false)
{
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
}
</head>
And in the view's in which you do not want to load this css file, Set the ViewBag.IncludeBootStrap value to false.
#{
ViewBag.IncludeBootStrap = false;
}
<h1>This view will not use bootstrap styles</h1>
Give an id to the tag.
<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />
And use this code:
You can use whatever event you want or just use the code without an event it's your choice
$("#A").click(function(){
$("#style1").attr("disabled", "disabled");
});
Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.
The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:
If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;
Set the disabled property of the DOM object via scripting.