I want to know that why does some code uses classes and styles in vue.js
Can anyone will let me know, well I do know about the usage when to apply CSS by classes and styles. Is this the same reason?
If I understand correctly, you're trying to understand the purpose of class in Vue. You're right in saying that class can be used as a selector for styles. However in Vue, binding to class using the syntax
:class
allows you to apply dynamic styling which can be very useful for manipulating specific elements.
Taking the example you provided,
:class="{ completed: todo.completed, editing: todo == editedTodo }"
this is saying if todo.completed is truthy, then apply the 'completed' style or if the todo item equates to the value of editedTodo, then apply the 'editing' style.
Usually, these styles would be defined on the Vue component, but can also be changed in-line using the :style binding.
The Vue documentation lays this out very clearly:
https://v2.vuejs.org/v2/guide/class-and-style.html
Also, it should be noted that class and :class can co-exist on an element.
Related
I am studying a project that uses a lot of Vuetify and v-card components. One such component is <v-card-subtitle> which is used like this-
<v-card-subtitle :title="display.content">
Hello World
</v-card-subtitle>
When I hover over v-card-subtitle, :title displays a small popup, I want to style this popup but it looks like an inherent Vuetify property, maybe?
What is :title and how does it work? Is anyone familiar with this? I can't find this in the documentation.
I want to style :title specifically, not the v-card-subtitle. I've tried the following ways-
Wrapping the title in a span and div
Adding addition classes or subclasses
But, no such luck.
Oh, that's just the regular HTML title attribute bound to a variable by Vue. Vue can bind variables to any HTML attribute using v-bind or the shorthand : syntax, not just component props.
Note that if an attribute is not bound by a component, it is pushed down to the component's root element. Vue calls this Fallthough Attributes.
So your v-card-subtitle renders a div with a HTML title attribute, set to the value in display.content. And yes, native titles cannot be styled.
But you could replace them with Vuetify's v-tooltip. Those you can style, change placement, and they overall fit nicely with other Vuetify components.
I want to change some part of the site based on selected language without any refresh. All worked but I have tried multiple ways to bind background-image dynamically on no refresh site language change (i18n). But no success.
<div :style="{'background-image' : mainBackground}">
test div
</div>
I have created a computed to return currently used link based on language.
mainBackground(){
return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}
But after change site language by dropdown all other elements src are updated to use the selected language image file. But only this background path is not updating. Also style attribute is deleted on the element itself. I can not figure out why this solution not worked properly. Also rendered mainBackground computed into the div element. And returned link is updated based on language.
I have solved the problem by using class binding. 1 class for Turkish lang, and main class for all other languages. And used them in conditional class binding. Solution:
:class="[isTurkishSite ? 'bg-turkish' : '']"
It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)
I am trying to get vue formulate controls to be syled using Buefy. What is the best way to go about this?
I imagine it's probably with using vue-formulate class keys.
But I am not sure what corresponding Buefy classes to match them to. (Or perhaps there is a different way to go about it?)
Buefy is styled with Bulma — so you have 4 options:
Use class keys to add Bulma styles to your <FormulateInput>s.
Use custom inputs to wrap Buefy components. This will take some work since they don't share common markup. For example, Buefy doesn't really have "error messages", it has "messages" which can be marked with the Bulma class "is-danger".
Ditch Buefy
Ditch Vue Formulate
(Opinion) – If you like Bulma's styles, then I would go with option #1. You can always use Buefy for your site but not for your forms and instead just configure Vue Formulate's class keys with Bulma's classes (Bulma classes are included automatically if youre using Buefy)
Full disclosure: I'm the creator of Vue Formulate.
I did some quick testing using Bulma (not Buefy) and the following class binding seems to work for Bulma style inputs
Vue.use(VueFormulate, {
classes: {
outer: 'field',
wrapper: 'control',
input: 'input'
}
})
Is there an "easy" way to render a custom element in ag-grid header cell? The headercomponent interface seems like an overly cumbersome approach to a seemingly simple problem and I have not been successful with this approach. The closest I have come is to use something like:
header-cell-render.bind="myHeaderRenderer"
which is currently a function returning a string of HTML. While this "works" (though I understand it is deprecated), in the sense that the html is injected into the DOM, only primitive HTML renders. Meaning I can return something like:
<input type="checkbox" />
and it will render a checkbox, but I cannot return something like:
<my-custom-element></my-custom-element>
I can see that markup in the DOM, but the element doesn't "process", that is the Aurelia aspect of the control is not executed.
I am using the latest versions of ag-grid, ag-grid-aurelia.
Any help would be greatly appreciated.
This is currently not possible out of the box with ag-grid-aurelia.
This is because ag-grid-aurelia makes no special handling for this binding. The proper way to handle this is using replaceable parts which allows you to specify a template for Aurelia to inject and consume. ag-grid makes this a bit harder since it seems the only native tool for injecting content into the header is by passing an HTML string or an HTML element in the column configuration. This can likely be added to the ag-grid-aurelia library by using a combination of replaceable parts and the #children decorator to gain access to the aurelia-rendered header element and pass it to the column configuration.
I am trying to override the .Select-control css component in react-select.
I want to set a custom height (the default is 36px) so it will look more closely to my other input fields
I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)
Is it possible to override the component itself?
I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.
.Select-control {
height: 32px
}
I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.
Hope that helps