I'm using vuetify (2.5.8) with our own custom theme colors. We've defined our own color names via String, or Object if we need more control over which variations are generated and to have fewer css variables.
However, I haven't been able to get these variations to work with the color prop of vuetify elements, specifically v-expansion-panel-header.
In the docs I saw example use of color=”purple darken-2" and color="success darken-2", separating the theme color and its variation by a space. This works, when a color in my theme is defined as a string and its variations are generated by vuetify as (darken|lighten)-{n}.
But when I define my own variations, this doesn't work anymore. For example: if I define the color success: { base: '#1CC234', muted: '#2AAC9B', }' in my theme, I can't use color="success muted", it will always display the base color. This is also true when I try to name my variations the way vuetify describes them, for example success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'. In this case, color="success darken-2" no longer works.
I've tried working around it by naming my variations 'darken-2' and the like, as well as nested syntax (success.muted) as the name of the generated color variable (success-muted), but to no avail. Does anyone have a way to pass these variations via the color prop, without having to use a v-deep selector and restyling the entire component everywhere I use it? Or should I use a computed to reach into this.$vuetify.theme and see if I can get the hexcode that way?
Thanks in advance.
color="success muted"
Only base and lighten/darken variations are used.
You can work around this by defining it as { success: '#1CC234', 'success-muted': '#2AAC9B' }
In this case, color="success darken-2" no longer works.
The keys in the theme configuration should be in camelCase: darken2
Related
i am building an app with element UI and when using tables with sorting capabilities, i can't change the sorting caret, bby default it's a filled triangle but i want to change it to an SVG icon i have.
here is the default icon :
Is there a way to change it, as the official docs don't specify how, or give any slot for it in headers.
It seems to me that you can't change it, looking at the interface you can see that it receives four parameters, but the documentation indicates two.
Documentation
:default-sort="{ prop: 'date', order: 'descending' }"
Interface
interface Sort {
prop: string;
order: 'ascending' | 'descending';
init?: any;
silent?: any;
}
if you manage to do it, I'm interested in knowing how you did it.
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
I use the ReadMore plugin to crop articles in a page. The plugin provides a props to redirect to a http link when the "read more" is clicked. But I need to display the link in a new tab. The props receives the link in a string.
I tried several ways to add the target blank attribute to this string before passing it to the props. With no success. Like:
http://www.example.com/page-to-see.html target=_"blank"
I used it with or without quotes but in any case, the link works but the attribute is skipped.
Is there a way to intercept this and add a target blank later?
I saw in other questions the use of router-link but I don't know how to manipulate the props content in the first place.
Any clue would be warmly welcomed
Edit: adding more code to give a clearer explanation of the problem I try to solve:
In the template:
<read-more more-str="read more" :text="dwId.texte" :link="dwId.link" less-str="less" :max-chars="540"></read-more>
I get the values from a DB with Axios. The props are specified by the plugin documentation.
The :link must be a string and it's what it gets from the DB. It works. But as I explained, I need to open in a new tab.
Edit: what I tried:
I try to make a computed property that would add the target blank to a string and use it in the read-more props:
computed: {
target: function() {
return this.dwIds.filter((dwId) => {
return dwId.link + target="_blank"
});
},
}
I have two issues here: first , the result is an object and the props requires a string. Furthermore, the way I add the target blank is not correct but I can't find the right syntax yet.
You need to use it as a directive, and override parts of the initial element you're passing. Otherwise there is no way to "intercept" it. Here's the code to the "component" version that won't do the trick for you.
When writing a control, prior to it's rendering you can add css classes to it's html representation's root dom node:
FooLayout.prototype.init = function() {
this.addStyleClass('fooCssClass');
};
This will work assuming writeClasses is executed during rendering:
oRenderManager.writeClasses();
--
There is another RenderManager function writeStyles which can add in-line styles to the html string buffer:
oRenderManager.addStyle("color", "green");
oRenderManager.writeStyles();
But there doesn't seem to be an analogous function to addStyleClass for adding these at the control level to be picked up during rendering.
Is there a way I can hook into writeStyles outside of the renderer?
I have to ask: What styling cannot be applied on control level with a class that can be done with a specific style attribute?
Anyway, the "solution" (which I do not like) would be to add a delegate to the class and do something on onAfterRendering:
oControl.addDelegate({
onAfterRendering: function() {
this.$().css("opacity", "0.5");
}.bind(oControl)
});
Here is an example: http://jsbin.com/seqemaqedo/1/edit?js,output
But as I said, I would advice against it because using a good name for a class uses less code and is much easier to read:
oControl.addStyleClass("semiTransparent");
Update:
After our discussion in the comments, here is an example of how to wrap a control that does not support setting width and height.
You still have to write CSS that references the inner control structure, but in this case it is very unlikely that it will change:
http://jsbin.com/lohocaqixi/3/edit?html,js,output
I am currently updating the bootstrap source less files for a project and I have to modify the hover state for the buttons. The end goal is something along these lines:
.btn-primary {
.buttonBackground(#btnPrimaryBackgroundHighlight, #btnPrimaryBackground);
&.hover {
.buttonBackground( lighten(#btnPrimaryBackgroundHighlight, %20), lighten(#btnPrimaryBackground, %20));
}
}
However, that returns a compile error. Any thoughts on this issue? I'm sure it's something simple, but I'm at a loss. Thanks in advance.
P.S. - I will also be using the :hover pseudo-class, but for sake of example I'm using a simple class.
Put the percent sign after the number (20% instead of %20)