I am using materialized range:
<div class="range-field col s6">
<input type="range" id="test5" min="0" max="100" #ranger (input)="yourMethod(ranger.value)"/>
</div>
This input creates in HTML span tag with class thumb, how could I change the color dynamically by changing the range? Is it possible to define in css .thumb {background-color: somevariable}, and change it from the component?
You can dynamically set the color in html through a variable defined in the component.
<p [style.color]="variable"></p>
define the value of variable in component. But make sure you have a default value defined otherwise it will throw an error.
Related
This is BaseInput.vue's template, as you know in Vue3 we have $attrs (fallthrough props) that we can specify where to bind prop value as below I bind it to element with the intention of customize css style for input element.
BaseInput.vue
<template>
<label :class="$style.wrapper">
<input
v-bind="$attrs"
:value="modelValue"
/>
<span :class="$style.label">
<slot name="label"></slot>
</span>
</label>
</template>
Then I call
<BaseInput
v-model="username"
:class="$style.field"
/>
<BaseInput
v-model="password"
:class="$style.field"
/ >
So basically the class field will be applied to <input/ > element in BaseInput.vue component thanks to v-bind='$attrs'.
But sometimes, I want to add css style for the wrapper element of BaseInput.vue (here is element).
For example:
margin-bottom: 32px;
I want the first has margin bottom = 32px, but the second one doesn't.
So what is the good way to achive that?
I just found a solution that we add a div wrapper for each but I think it's not really good idea. So please elaborate me.
I'd like to post the contents of a contenteditable field/div whenever it changes. hx-trigger="change" didn't trigger, but using hx-trigger="blur" is okay. How do I submit the value of the contenteditable div in the request?
<div id='parent-div'>
<div contenteditable='true'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
Hello, I am a content editable field
</div>
</div>
I don't believe htmx supports submitting contenteditable values out of the box. You'd probably need to mirror the content text within contenteditable to a a hidden input and move the hx attributes to the parent div.
You could use something like https://alpinejs.dev/ or htmx's companion https://hyperscript.org/
With hyperscript you could do it with something like this:
<div id='parent-div'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
<div id="editordiv" contenteditable='true'>
Hello, I am a content editable field
</div>
<input type="hidden" name="editor" _="on keyup from #editordiv put its innerHTML into me" />
</div>
I found an old reference from the htmx Discord that offers another way of doing this:
<form hx-post="/whatever"
hx-vals="javascript: editable:htmx.find('#myEditable').innerHTML"> ...
I have this stucture in my parent Component:
<div class="section" >
<VRVideoPage :isActive="false"></VRVideoPage>
</div>
Via a third-party tool it's possible that the "section"-div gets a css class named "active" added.
I now want to toggle the ":isActive" property on the VRVideoPage component to true, whenever the active class is applied to its parent.
Is this achivable via the vue template syntax?
You can try like this but it is not a good practice and may not work:
<div class="section" >
<VRVideoPage ref="video" :isActive="$refs.video.$el.parentNode.classList.contains('active')"></VRVideoPage>
</div>
I'm trying to dynamically set the class of a listview item template:
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<h1 class="semanticZoomItem-Text" data-win-bind="innerText:title;class:contains"></h1>
</div>
But data-win-bind fails to do anything when 'class' is present as a property-name.
Is there a correct way to styling specific items in a listview if indeed I can't change the class with data-win-bind?
You need to set the JavaScript class property, which is not called "class", but "className".
WinJS allows you to bind HTML properties dynamically at run-time, similar to XAML binding.
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="innerText: timestamp"></h3>
</div>
How if I want to also bind the font color style for <h3> as well, how do I achieve that?
Unlike the data-win-options binding which makes use of {key:value,key2:value2} syntax. data-win-binding uses a syntax similar to inline-css styles.
Using property:bindingValue;property2:bindingValue2 etc will allow you bind multiple properties to the same HTML control.
As an example to answer the question above:
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="style.color: fontcolor; innerText: timestamp"></h3>
</div>
Lets say you want to switch between green and red color if the timestamp is "important", and you have a field "isImportant" in your model:
HTML:
<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
<h3 data-win-bind="innerText: timestamp; style.color: isImportant MyConverters.colorConverter"></h3> </div>
Then you could use an converter to return the preferred color depending on the boolean isImportant like this:
JS:
WinJS.Namespace.define("MyConverters", {
//Converter function
colorConverter: WinJS.Binding.converter(function (important) {
return important ? "Green" : "Red";
})
});