How can I change some bootstrap switch css classes dynamically if the state changes to true or false? In fact, if it is possible, appending a new class also may solve my problem. Is there any simple and useful way to do it? I tampered documentations but found nothing.
onSwitchChange event is well enough for this situation but i need some help about it.
Update
I attached an image that tells what i want to achieve.
I think CSS is the right way to go with what you are trying to achieve,
all you need to do is enclose your switch inside a parent div and then write some CSS
.parent-div .boostrap-switch-on{
//enter styles for the ON state
}
.parent-div .boostrap-switch-off{
//enter styles for the OFF state
}
Related
I'm in the process of migrating some legacy pages to web components using StencilJS, so I'm in a situation where some elements are already handled with StencilJS, some are not, and migrating everything will take quite some time.
In this context I need to be able to update the contents of a target div not managed with StencilJS from a StencilJS component. This div is in a totally different branch of the DOM and it's impossible to move it into the component without rethinking the entire page.
So from my component I need to be able to do something like this:
render() {
const target = document.getElementById(this.targetDiv);
if (target) {
target.innerHTML = jsxToString(this.renderDivContents()) // obviously this doesn't work
}
}
renderDivContents() {
return (<p>Some JSX stuff</p>)
}
So, in other words I need to compile the JSX template immediately into a string. I'm not sure how to do that with StencilJS and if it is even possible. I'm under the impression that there is a way to achieve that because it looks very similar to what we do in tests, but all the resources I find on the topic are for JSX with React and does not really help with StencilJS
If this is not the correct approach, what do you suggest? I know injecting HTML into a DOM element is not ideal, but I'm just trying to find a temporary solution to be able to release my changes gradually.
PS: I know I can also use an overlay approach (generate a div into the component and give it the same position and size than the target div), but this sounds even uglier than innerHTML. This is not the answer I expect.
So I think the title is enough explaination: I would like to dynamically theme my whole application. Maybe this means to change color of all divs when I press a specific button, or change the whole webapp's colors when a specific user logs in.
Just to give some insights on what I am currently working on I will say that I have built a Vue.js app that uses many libraries, including one called Element-ui which already has a theming option built onto it. The problem is that it's written in scss and I would like to change all the variable colors during the navigation. My project looks something like this:
<template>
... some HTML and components...
</template>
<script>
... some javascript ...
</script>
<style scoped>
... some style that is scoped to the current component only ...
</style>
I have many files like this one so making a "global function" for all of them doesn't seem practical to me. Also I import the main scss file just once in my main.js.
Is there anything I can do to create a dinamic theming for my webapp? Is using saas a good idea? Javascript maybe?
EDIT
I feel like I didn't explain it good enough so I want to add a simple example. If you visit the Element page you can see in the top right corner there is a color selector that, when a color changes, it changes also the whole website's accent colors like the buttons colors, the links colors etc.
Hope this can help understanding a bit better
EDIT
Right now I have settled on a very poor and, I think, badly optimized solution. The idea is that when the user changes theme, I just create a new css file and append it to the current document.
let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
background-color: ${colors[0]};
}
...`;
document.body.appendChild(sheet);
I truly think this is a very bad solution but right now I can't come up with nothing else that could work dinamically when the user changes a parameter. I would really want the process to be flawless: the user picks a color and the whole application just changes to that specific color, no prebuilt theme.css.
FINAL EDIT
I've finally found a solution, refer to the answer!
Finally, after a few long days I came up with a solution that I think is both easy to implement and very very lightweight.
CSS VARIABLES
Before searching up a lot, I didn't even know the existance of these kind of variables and they don't seem so used. Anyway, I hope this can help someone out there seeking my same answer:
<template
<app-main></app-main>
<app-sidebar></app-sidebar>
...
</template>
<style>
:root{
--primary-color: #C5C5C5!important;
--secondary-color: #6C7478!important;
--tertiary-color: #FFFFFF!important;
--success-color: #80b855!important;
--warning-color: #eaca44!important;
--error-color: #ef4d4d!important;
}
/* Theming */
header{
background-color: var(--primary-color);
}
div{
color: var(--tetriary-colory);
}
...
/* END */
</style>
<script>
import axios from 'axios' /* all your imports etc. */
export default{
data(){
},
methods: {
axios.post(`http://localhost:8080/foo`).then(function (response){
let bodyStyles = document.body.style;
bodyStyles.setProperty('--primary-color', response.colors[0]);
bodyStyles.setProperty('--tertiary-color', response.colors[1]);
...
}
}
}
</script>
As you can see, I just initialize a few useful CSS variables and when I need them (for example in that api post call) I just modify them using a simple bodyStyles.setProperty('propertyName') function.
I really enjoy this type of setup since I use it in my login page so when a user successfully logs-in I load from the database his own colors and set them up just like that.
Hoping this can help someone! Cheers!
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
vue-waypoint could be an option.
GitHub
NPM
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.