How to double loop in LESS to generate a set of mixins such as:
.p_0_0 {
padding: 0rem 0rem;
}
.p_1_0 {
padding: 1rem 0rem;
}
.p_0_1 {
padding: 0rem 1rem;
}
.p_1_1 {
padding: 1rem 1rem;
}
It is better to use built-in tools...
Since LESS 3.x version LESS has each function, see more here. In this case, we can use this function to its fullest:
#steps: {
0: 0rem;
1: 1rem;
};
each(#steps, .(#valueX, #keyX, #indexX) {
each(#steps, .(#valueY, #keyY, #indexY) {
.p_#{keyY}_#{keyX} {
#{valueP}: #valueY #valueX;
}
})
})
Which generates:
.p_0_0 {
padding: 0rem 0rem;
}
.p_1_0 {
padding: 1rem 0rem;
}
.p_0_1 {
padding: 0rem 1rem;
}
.p_1_1 {
padding: 1rem 1rem;
}
Related
So I have seen this pie menu generator which gives you an HTML, CSS and JS code and I wanted to use it in my Vue 3 project. I am new to vue and this was how I imported it.
here is the link to the pie menu generator: http://pmg.softwaretailoring.net/
I did this in my wrapper component. Somehow this bought many errors in which I think is because of how I imported the JS library.
<template>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" #blur="close">
<div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-marker
data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='270'
data-wheelnav-cssmode data-wheelnav-init>
<div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div>
<div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div>
</div>
</div>
</template>
<script>
import '../assets/raphael.min.js'
import '../assets/raphael.icons.min.js'
import '../assets/wheelnav.min.js'
var piemenu = new wheelnav('piemenu');
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();
export default {
name: 'CmpContextMenu',
props: {
display: Boolean, // prop detect if we should show context menu
},
data() {
return {
left: 0, // left position
top: 0, // top position
show: false, // affect display of context menu
};
},
computed: {
// get position of context menu
style() {
return {
top: this.top + 'px',
left: this.left + 'px',
};
},
},
methods: {
// closes context menu
close() {
this.show = false;
this.left = 0;
this.top = 0;
this.myTrigger = false;
console.log('trigger false');
},
open(evt) {
this.show = true;
// updates position of context menu
this.left = evt.pageX || evt.clientX;
this.top = evt.pageY || evt.clientY;
},
},
};
</script>
<style>
.context-menu {
position: fixed;
z-index: 999;
cursor: pointer;
}
#piemenu>svg {
width: 100%;
height: 100%;
}
#piemenu {
height: 400px;
width: 400px;
margin: auto;
}
#media (max-width: 400px) {
#piemenu {
height: 300px;
width: 300px;
}
}
[class|=wheelnav-piemenu-slice-basic] {
fill: #497F4C;
stroke: none;
}
[class|=wheelnav-piemenu-slice-selected] {
fill: #497F4C;
stroke: none;
}
[class|=wheelnav-piemenu-slice-hover] {
fill: #497F4C;
stroke: none;
fill-opacity: 0.77;
cursor: pointer;
}
[class|=wheelnav-piemenu-title-basic] {
fill: #333;
stroke: none;
}
[class|=wheelnav-piemenu-title-selected] {
fill: #fff;
stroke: none;
}
[class|=wheelnav-piemenu-title-hover] {
fill: #222;
stroke: none;
cursor: pointer;
}
[class|=wheelnav-piemenu-title]>tspan {
font-family: Impact, Charcoal, sans-serif;
font-size: 24px;
}
.wheelnav-piemenu-marker {
stroke: #444;
stroke-width: 2;
}
</style>
I have a button and I just want it animate on a click - make as it been pressed. It works if I make optional component as below:
<template>
<button class="button" :class="{'shadow__click': classButton}" #click="buttonClass">
Tell me already!
</button>
</template>
<script>
export default {
data(){
return {
classButton : false
}
},
methods: {
buttonClass(){
this.classButton = true;
setTimeout(() => {
this.classButton = false
}, 1000)
}
}
}
</script>
<style lang="less">
.button{
cursor: pointer;
padding: 12px 24px;
position: relative;
border-radius: 5px;
background-color: #38b2ac;
border: none;
color: #fff8e1;
}
.shadow__click{
animation: click 1s
}
#keyframes click {
0% {
top: 0;
left: 0;
}
25% {
top: 5px;
left: 1px;
}
50% {
top: 10px;
left: 3px;
}
75% {
top: 5px;
left: 1px;
}
100% {
top: 0;
left: 0;
}
}
</style>
but it doesn't want to work when I do Composition way and I don't see a problem but it simply doesn't work (( I console.loged function and it goes to function changes the value of a variable, but class is not applying. Is it a Vue 3 bug?
<script>
import { ref } from "vue"
setup(){
let classButton = ref(false);
function buttonClass(){
classButton = true;
setTimeout(() => {
classButton = false
}, 1000)
}
return { classButton, buttonClass}
}
</script>
You should mutate the ref using the value field :
let classButton = ref(false);
function buttonClass(){
classButton.value = true;
setTimeout(() => {
classButton.value = false
}, 1000)
}
I'd like to use svg-gauge (https://github.com/naikus/svg-gauge) in a vue component (vue-svg-gauge does not work properly). I am struggling where to start. I have imported the library but am not sure about using it within vue. This is what I have done so far:
<script>
module.exports = {
props: {
'value': {type: Number, default: 20},
},
data: function () {return {
chart: null
}},
mounted: function () {
this.chart = new Gauge(
document.getElementById("gauge1"), {
min: 0,
max: 50,
dialStartAngle: 180,
dialEndAngle: 0,
value: this.value,
color: function(value) {
if (value < 0) {
return "#5ee432";
} else if(value < 25) {
return "#fffa50";
} else if(value < 50) {
return "#f7aa38";
} else {
return "#ef4655";
}
}
}
);
},
}
}
}
</script>
It renders a gauge but I'm not sure how to update it or if this is the right way of going aboout things?
Thanks
Martyn
Update:
I am now using High charts gauge as it see easier to configure.
The solution I came up with for the above question is as follows (from an old commit)
<template>
<div class="wrapper bg-dark text-light border-0">
<div id="gauge1" class="gauge-container two"></div>
</div>
</template>
<script>
module.exports = {
props: {
'value': {type: Number, default: 0},
},
data: function () {return {
chart: null
}},
mounted: function () {
this.chart = new Gauge(
document.getElementById("gauge1"), {
min: 0,
max: 50,
dialStartAngle: 180,
dialEndAngle: 0,
value: this.value,
color: function(value) {
if (value < 0) {
return "#5ee432";
} else if(value < 25) {
return "#fffa50";
} else if(value < 50) {
return "#f7aa38";
} else {
return "#ef4655";
}
}
}
);
},
beforeDestroy: function () {
// this.chart.destroy()
},
watch: {
value: function (val) {
this.chart.value = val
},
options: function (opt) {
// this.chart.destroy()
// this.chart = new RadialGauge(Object.assign({}, this.options, {renderTo: 'canvas-gauge', value: this.value})).draw()
}
}
}
</script>
<style scoped>
/* ------ Default Style ---------- */
.gauge-container {
width: 250px;
height: 250px;
display: block;
float: left;
padding: 10px;
background-color: #222;
margin: 7px;
border-radius: 3px;
position: relative;
}
.gauge-container > .label {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: rgba(0,0,0,0.5);
font-family: monospace;
font-size: 0.8em;
padding: 5px 10px;
}
.gauge-container > .gauge .dial {
stroke: #334455;
stroke-width: 2;
fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value {
stroke: rgb(47, 227, 255);
stroke-width: 2;
fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value-text {
fill: rgb(47, 227, 255);
font-family: sans-serif;
font-weight: bold;
font-size: 0.8em;
}
/* ------- Alternate Style ------- */
.wrapper {
height: 150px;
float: left;
margin: 7px;
overflow: hidden;
}
.wrapper > .gauge-container {
margin: 0;
}
.gauge-container.two {
}
.gauge-container.two > .gauge .dial {
stroke: #334455;
stroke-width: 10;
}
.gauge-container.two > .gauge .value {
stroke: orange;
stroke-dasharray: none;
stroke-width: 13;
}
.gauge-container.two > .gauge .value-text {
fill: #ccc;
font-weight: 100;
font-size: 1em;
}
</style>
Im trying insert span in placeholder, for color change. But placeholder returns only string, ow to fix that?
computed: {
customPlaceholder () {
let numLength = this.options.length;
return this.placeholder + "<span>"+numLength+"</span>"
}
}
I think you're trying to add a custom placeholder inside an input field.
to do this you need some mix of css and html.
new Vue({
el: '#editor',
data: {
input: '',
input2: 'some text'
},
computed: {
placeholderText: function () {
return `${this.input2} <span>*</span>`
}
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value
}, 300)
}
})
#editor div {
display: inline-block;
}
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/lodash#4.16.0"></script>
<div id="editor">
<div class="input-placeholder">
<input type="text" #input="update">
<div class="placeholder" v-if="!input" v-html="placeholderText">
Email <span>*</span>
</div>
</div>
</div>
I have created this jsfiddle for my solution.
you can use css placeholder selector
input::-webkit-input-placeholder { /* Edge */
color: green!important;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: green!important;
}
input::placeholder {
color: green!important;
}
Try it, then try to remove the !important.
But information is missing. You want to change the color dynamically or not? or you want to have different colours into the same placeholder?
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
I have widths of different planets
$mercury-width: 20px;
$venus-width: 30px;
$earth-width: 20px;
and their names:
`
$planets: mercury, venus, earth;
#each $planet in $planets {
.#{$planet} {
width: #{$planet}-width;
}
}
it doesn't work.
expected result:
.mercury {
width: 20px;
}
etc.
How can I do that?
How about this:
$planets-width: (mercury: 20px, venus: 30px, earth: 20px);
#each $name, $width in $planets-width {
.#{$name} {
width: $width;
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
}
If you want both color and size you can use nested maps:
$planets-map: (mercury: (width : 20px, color: red), venus: (width : 30px, color : purple), earth:( width: 20px, color: blue));
#each $name, $properties in $planets-map {
.#{$name} {
width: map-get($properties, width);
color: map-get($properties, color);
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
color: red;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
color: purple;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
color: blue;
}