I have a Ractive component that includes within its template html a Bootstrap .collapse element. Calling show() and hide() on this will trigger Bootstrap show and hide transitions.
# the component template:
<div id='my_component>
<div class='collapse'>
some stuff to show or hide in here
</div>
</div>
# the component code:
Ractive.extend({
template : "#component_template",
show : function(){
// call show() on the .collapse element within the rendered template
// but how to get a reference on that element?
},
hide : function(){
// call hide() on the .collapse element within the rendered template
// but how to get a reference on that element?
}
})
How can I get a reference in the javascript to the collapse element? this.el seems to refer to the root (component's parent) and not the component's view fragment.
thanks in advance
ractive.find(querySelector) is what you're looking for:
Ractive.extend({
template : "#component_template",
show : function(){
this.find('.collapse').show();
},
hide : function(){
this.find('.collapse').hide();
}
})
Related
{
this.DimensionDialogOpened = event.detail.value;
//console.log("dialog opened");
}
}"
${dialogRenderer( () => html
`
`
)}
>
</vaadin-dialog>
I divided the screen into 3 and i expect the dialog to be shown in the right end div,
when someone click on a buttoon
If you want apply style to your component pass style prop to component and set it with the help of styleMap() method from lit.
I'm making a vuejs component in my project, and i need to create a zoom with scroll, in a div (like googlemaps).
<div #scroll="scroll">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
<style>
div {
transform: scale(property1);
}
<\style>
<script>
export default {
methods: {
scroll(event) {
},
},
created() {
window.addEventListener('scroll', this.scroll);
},
destroyed() {
window.removeEventListener('scroll', this.scroll);
}
}
</script>
How can i make a method that make the "property1" reactive? Or there is another way to zoom with scroll only the div?
you can bind a dynamic style object to your div which includes the transform property with a dynamic value (see docs for deeper explanation):
<div #scroll="scroll" :style="{ transform : `scale(${property1})`}">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
new Vue({
...
data() {
return {
property1: defaultValue
}
},
methods : {
scroll(e){
// e is the event emitted from the scroll listener
this.property1 = someValue
}
}
})
You can also add some modifiers in the template as shown in the documentation to reduce the method code (here we could be preventing the page from scrolling whenever the user will be scrolling while hovering this specific element):
<div #scroll.self.stop="scroll" :style="{ transform : `scale(${property1})`}">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
In VueJS, I have elements that have hover property in my object.
So, I want to put a foreach in style, but it is not possible.
I want to do that kind of thing :
<style>
#foreach (element in elements) {
if (element.has_backgroundhover) {
'#'+element.id:hover {
background : element.background_hover;
}
}
}
</style>
Notice that each element has a background color different (it is stored in his oibject property)
Thank you
The #mouseenter and #mouseleave event listeners would allow for css classes to be applied to each element.
For example, toggle a .hovered class that has the background color defined.
Something like this?
The HTML:
<div id="app">
<div
v-for="element of elements"
#mouseenter="element.hover=true"
#mouseleave="element.hover=false"
:style="{
background: element.hover? element.background_hover : element.background
}"
>{{element.name}}</div>
</div>
And the JS:
new Vue({
el: "#app",
data: {
elements:[
{
name:"element1",
background:"#f8f",
background_hover:"#a4a",
hover:false
},
{
name:"element2",
background:"#ff8",
background_hover:"#aa4",
hover:false
},
]
},
})
This is not using the CSS, rather using events as suggested by #DigitalDrifter. I think the point is that reactive css is not a good idea, and not supported in vue. Instead you need to have the HTML element properties dependent on your vue data object. A fiddle for this is: https://jsfiddle.net/edzaokum/
I have next HTML
// This is parent
<div class="some-class">
// This is child
<totalizer</totalizer>
</div>
How can I change parents style ( add new class ) from child?
You can use an EventEmitter #Output() property that signals the parent component to add/remove a css class dynamically using ngClass.
In your child totalizer component, define,
#Output() cssRefresh = new EventEmitter<boolean>();
//when you need to add/remove css emit an event out to the parent like this
// (preferably in a method in this component),
this.cssRefresh.emit(true); // or 'false' depending on add/remove
Then in the parent html modify this,
<div class="some-class" [ngClass]="{ 'dynamicClass1 dynamicClass2 dynamicClass3': addCss}">
// This is child
<totalizer (cssRefresh)=refreshCss($event)></totalizer>
</div>
Inside your parent component add this method and property,
addCss = false; // set 'initial state' based on your needs
refreshCss(add: boolean) {
this.addCss = add ? true : false;
}
More on ngClass here.
How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?
Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.
Is there any other way that we could perform this while view element is getting rendered?
didInsertElement: function() {
this._super();
var personStr= this.get("content").person;
if(personStr==1){
this.$("img").addClass("add-person");
this.$("img").removeClass("view-person");
this.$("img").removeClass("edit-person");
}
}
You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.
See an example here http://jsfiddle.net/pangratz666/b4xGP/:
Ember.CollectionView.create({
content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],
itemViewClass: Ember.View.extend({
templateName: 'item',
classNameBindings: 'beginsWithA'.w(),
beginsWithA: function() {
var name = this.getPath('content.name');
if (!Ember.empty(name)) {
return name.indexOf('A') === 0;
}
}.property('content.name')
})
}).append();