I am toggling one element and at that time, want to bind style another element. But I didn't understand how to achieve this with #click
data(){
return {
show:false,
filterStyle: {
top: 0,
background: "#dfe4ea",
marginTop: "15px",
marginBottom: "15px",
},
}
}
methods: {
closing(){
this.show = !this.show
},
}
<p class="closeMap" #click="closing()">close</p>
closing div below.
<div v-show="!show"></>
changing styles div below.
<div :style="filterStyle" class="filter"></div>
Is there someone can explain it to me?
Edit: By the way, as you see I am binding my styles, no problem with that. But not by #click... I want to bind those styles by #click.
I don't know if you want to add style on show or !show, anyway you can achieve it in this way:
<div :style="show ? filterStyle : null" class="filter"></div>
filterStyle will be applied only when show is true
I guess you could make a computed property, which changes based on this.show:
// Template
<div :style="filterStyle" class="filter"></div>
// Computed property
computed: {
filterStyle() {
if (this.show) {
return {
top: 0,
background: '#dfe4ea',
marginTop: '15px',
marginBottom: '15px'
};
} else {
return '';
}
}
}
You could also set filterStyle to something else in the click function
Related
I am trying to have sentence case with Button text inside Material UI Button.
https://mui.com/components/buttons/
text inside the button - ADD FRIEND should become to sentence case as Add friend.
I have tried to override the theme. But it does not target the element this way.
Please suggest if this is possible to do.
createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
'&::first-letter': {
textTransform: 'uppercase',
},
},
}
}
}
});
They way I do it, is write the following code in makeStyles of the page/component:
parentOfButton: {
'& .MuiButton-root': {
textTransform: 'none',
},
},
<Box className={classes.parentOfButton}>
<Button>Text</Button>
</Box>
UPDATE
I have tried doing the same thing in createTheme, and it worked, here is the way I did it:
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
},
},
},
},
Through styles, I could not make the first letter of the transmitted text capitalized until I wrapped the transmitted text in some kind of tag, for example
.button {
& > *::first-letter {
text-transform: uppercase;
}
}
<Button className={s.button}>
<p>some text</p>
</Button>
This is my first question here so I hope to explain it correctly.
I have imported a datepicker element and im trying to override a class property by doing the following:
const useStyles = makeStyles({
testingWidthLimit: {
width: '180px !important',
minWidth: '180px !important',
maxWidth: '180px !important',
},
};
const { testingWidthLimit } = useStyles();
<InputDate
className={testingWidthLimit}
{other properties here}
/>
I cannot post a picture due to my starter reputation, but this is what's rendered on the screen:
<div class="sc-gXZlrW ikzFYF makeStyles-testingWidthLimit-3">
<div class="react-date-picker react-date-picker--closed react-date-picker--enabled">
<div class="react-date-picker__wrapper">
(the rest goes here but that is not important)
</div>
</div>
</div>
oh the class "react-date-picker__wrapper" the property "min-width: 264px" is still there
As you can see, I've tried every property I know of and still won't override the child property. I do not have access to the InputDate code and I have to use it.
I tried using !important (with or without space as I've seen on some other questions) and one property at a time and that is still not working, can anyone tell me what am I missing?
Edit1: on the first div, my class is being applied and all of the properties are there with the !important tag.
Below is the syntax you need to override the min-width of the react-date-picker__wrapper descendant of the element with the testingWidthLimit CSS class:
const useStyles = makeStyles({
testingWidthLimit: {
"& .react-date-picker__wrapper": {
minWidth: 180,
}
},
};
If you need to set min-width on the descendant and on the testingWidthLimit element itself, then you would want the following:
const useStyles = makeStyles({
testingWidthLimit: {
minWidth: 180,
"& .react-date-picker__wrapper": {
minWidth: 180,
}
},
};
Related documentation:
https://cssinjs.org/jss-plugin-nested?v=v10.5.0#use--to-reference-selector-of-the-parent-rule
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
There is such a code:
<template>
<div class="chart"
v-bind:style="chartStyleObject">
</div>
</template>
<script>
export default{
data () {
return {
chartStyleObject: {
width: this.$store.state.chartStyleObject.width,
height: this.$store.state.chartStyleObject.height,
marginTop: this.$store.state.chartStyleObject.marginTop,
marginRight: this.$store.state.chartStyleObject.marginRight,
marginBottom: this.$store.state.chartStyleObject.marginBottom,
marginLeft: this.$store.state.chartStyleObject.marginLeft,
},
},
}
}
And such a repository:
const axios = require("axios");
export const state = () => ({
chartStyleObject: {
height: '247px',
width: '500px',
marginTop: '15px',
marginRight: '0px',
marginBottom: '0px',
marginLeft: '15px',
},
});
export const mutations = {
changeChartDraggableEventState (state, EventState) {
state.chartDraggableEventState = EventState;
},
changeChartHeight (state, height) {
state.chartStyleObject.height = height;
},
changeHeightWrapper (state, HeightWrapper) {
state.chartStyleObject.HeightWrapper = HeightWrapper;
},
changeWidthWrapper (state, WidthWrapper) {
state.chartStyleObject.WidthWrapper = WidthWrapper;
},
changeChartMarginLeft (state, MarginLeft) {
state.chartStyleObject.marginLeft = MarginLeft;
},
changeChartMarginTop (state, MarginTop) {
state.chartStyleObject.marginTop = MarginTop;
},
};
Problem:
If I change the state of the repository through mutations, then the properties of the repository change correctly.
But!
The data properties on which the same storage properties are tied for some reason does not change.
(Despite the fact that repository property was changed)
My question is:
Why does this happen - if dates property, as well as repositories property, in theory, should be reactive?
And which approach is the most correct in this case to solve this problem? (writing directly the storage properties in the code seems like a very cumbersome decision.)
When you assign the values in
chartStyleObject: {
width: this.$store.state.chartStyleObject.width, // here
height: this.$store.state.chartStyleObject.height,
marginTop: this.$store.state.chartStyleObject.marginTop,
marginRight: this.$store.state.chartStyleObject.marginRight,
marginBottom: this.$store.state.chartStyleObject.marginBottom,
marginLeft: this.$store.state.chartStyleObject.marginLeft,
},
you are assigning values to the width, height and so on. You assign to them the current values of the state variables.
If you want the properties of chartStyleObject to change whenever the store's state changes, either map the state directly in the template (or wheverever you use it) or create a computed:
export default {
computed: {
chartStyleObject() {
return {
width: this.$store.state.chartStyleObject.width,
height: this.$store.state.chartStyleObject.height,
marginTop: this.$store.state.chartStyleObject.marginTop,
marginRight: this.$store.state.chartStyleObject.marginRight,
marginBottom: this.$store.state.chartStyleObject.marginBottom,
marginLeft: this.$store.state.chartStyleObject.marginLeft,
};
},
},
}
So I had a vue app that I just wrote into a .html file being served by django. I now am trying to move over to a dedicated vue.js project with the CLI and so I'm wanting to break apart all the components I had in that single file and move them into their own vue files.
My question is can I just create a file called Overview.vue and copy and paste my component into there as is? - or do I need to make some modifications?
Most examples I see of single file components have dedicated blocks for <style> <template> <script>. In my component I pasted below, the template is inside the component. Do I need to change this?
Vue.component('overview', {
delimiters: [ '[[', ']]' ],
props: ['jobs', 'links'],
template: `
<div overview>
<h3>Overview</h3>
<table :style="overviewStyle">
<tr>
<td>Start Time</td>
<td>[[ jobs[0].time_start ]]</td>
</tr>
</table>
</div>
`,
computed: {
overviewStyle() {
return {
'padding': '8px',
'width': '100%',
'display': 'table',
};
},
methods: {
getStyle (name) {
switch (name) {
case 'SUCCESS':
return {
'background-color': '#dff0d8',
'padding': '10px',
'line-height': '1.42857143',
'border': '1px solid #C0C0C0',
}
case 'IN_PROGRESS':
return {
'background-color': '#f4dc42',
'padding': '10px',
}
case 'FAILURE':
return {
'background-color': '#f45942',
'padding': '10px',
'line-height': '1.42857143',
'border': '1px solid #C0C0C0',
}
};
},
},
});
Yes, you will need to follow the structure for Vue Single File Components.
It accepts 3 blocks, <template>, <script> and <style>.
<template>
<!-- your template here -->
</template>
<script>
// javascript here
export default {
data() {
return { ... }
},
methods: { ... }
// etc
}
</script>
<style>
/* any css here */
</style>
I am curious, is it possible to bind the inline style in Vue.js? I'm familiar with class binding but what if sometimes for some reason you want to bind a style statement inline, is it possible to bind it like you do with class?
For example:
<template>
<div>
<h1 :style="{('background:red') : condition}"> Text </h1>
<button #click='condition = true'>Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
condition: false,
};
},
};
</script>
In the example above I'd like to change the background of the element when the condition becomes true.
Of course it is possible as described here: https://v2.vuejs.org/v2/guide/class-and-style.html
<template>
<div>
<h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
<button #click='condition = true'>Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
condition: false,
activeColor: 'white',
fontSize: 12,
};
},
};
</script>
Yes, it's possible please go through the docs
Note: please use computed, methods instead of inline for better debugging
<template>
<div>
<h1 :style="styleObject"> Text </h1>
<button #click='toggleCondition'>Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
condition: false,
};
},
computed: {
styleObject() {
return this.condition ? { background: 'red' } : {};
},
},
methods: {
toggleCondition() {
this.condition = !this.condition;
},
},
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>