I have website with user can choice date_range, so i use datepicker element-ui. But datepicker default theme, how i can change that in vue.
At present, Element-UI doesn't provide the function of highly customized theme, only simple customized size and color.
However, you can customize the style with the following configuration:
popper-class - custom class name for DatePicker's dropdown
picker-options - You can set custom class name by creating a picker-options object with cellClassName property.
You can override the default style with a custom class.
Example:
// template
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day">
</el-date-picker>
// css
.custom-date-picker{
.el-date-picker__header{
// custom header style here
}
}
this working for me, Element Plus with Vue 3!
In App.vue
<style lang="scss">
.el-date-editor {
--el-date-editor-width: 40% !important;
}
</style>
You need to just add style inside the tag like
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day"
--> style="width: 100%" />
Related
<InputCheckbox class="input-checkbox100" id="ckb1" style="background: #918f8f;" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
however when the component is rendered, the color that is being displayed is from the class (input-checkbox100). I am trying to override it for this 1 specific element (so not trying to add it to the CSS).
You can use style tag in your blazor component and override your css class
for example :
#page "/"
<style>
.input-checkbox100{
background: #918f8f;
}
</style>
Give a name to your class here i set ForInput:
<InputCheckbox class="input-checkbox100 ForInput" id="ckb1" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
then go to wwwroot go to css and then open app.css and add ForInput in your css with your desire background.
.ForInput{
background: #918f8f;
}
I'm trying to make angular components for reusable bootstrap-cards as below
<app-card class="someClass" style="width: 20rem"=>
<p>some content here for the ng-content</p>
</app-card>
Is there anyway I can add CSS classes and styles directly on the component tag for further customization?
If you want one user to provide a custom css class to customise the component then you can expose one property to get the className provided by the user. For this you can use #Input() decorator.
Let's say a user has this class at his/her component:
.customClass{
/* some style props */
}
and applied to the component as :
<app-card class="customClass"></app-card>
In the component you can add a #Input property:
#Input() cssClass = class;
In your template do this:
<div [class]="cssClass">
<!-- children tags -->
</div>
I want to dynamically change the background-image on a ccs class in an imported component
How can I do that?
I have installed 'vue-range-slider' and have imported RangeSlider
The range-slider is set up the following way.
<template>
<div id="slider_div" >
<range-slider
class="slider"
min="0"
max="100">
</range-slider>
</div>
</template>
<script>
import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css';
export default {
name: 'susScore',
data: function() {
return {
emoji: "../assets/emoji_small.jpg",
}
},
components: {
RangeSlider
}
</script>
<style >
#slider_div{
margin-top: 95px;
margin-left: 4%;
}
.slider{
width:200px;
}
.range-slider-knob {
background-image: url("../assets/emoji_small.jpg")
}
</style>
In this case I am sending a specific image but I want to send an image dynamically using the data option, emoji, in the component.
Question
How can I dynamically update the background-image in the imported .range-slider-knob class?
I tried using CSS variables in a previous question here on SO (Dynamically add image with css variable in vue) but got the reply that that wasn't possible
You can't use vm properties in <style> tag, but you can update emoji in data to:
emoji: require("../assets/emoji_small.jpg")
... and then pass it to any template element using:
<whatever :style={backgroundImage: `url(${emoji})`} />
A fully working example: codesanbox.
I combined require() with a computed changing loaded image based on slider value.
In the RangeSlider.vue file, line 13 shows that the component includes a named slot 'knob'. Vue Slots let you pass html/vue content into the component.
You could pass in a simple div on which you can dynamically change it's background using a method like #tao suggested. Note that a name attribute is given to match the name of the slot you are trying to replace; however, the name shouldn't be required because it is the only slot within component you are using.
<range-slider
class="slider"
min="0"
max="100">
<div
name="knob"
:style={backgroundImage: url(emoji)}
/>
</range-slider>
This method also gives you more freedom in how the knob is presented and/or manipulated with JS.
I created a custom css snippet for nth-of-type keyword in css. But it doesn't seem to work. All other snippets work perfectly.
<snippet>
<content><![CDATA[
nth-of-type(${1})
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>noty</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css</scope>
</snippet>
But when I enter the tab trigger and press tab it just puts a colon ahead. Also I have installed Emmet and I think it might be conflicting with something here.
Also I've saved the snippet in the correct directory.
As Philipp Sander says 'noty' is not an element. it's a content of the <tabTrigger>. CSS won't work for content.
You can use tag/an element name or you can use class/id property in an element, and use that class/id value to select that element.
Id property :
<tabTrigger id="noty_element">noty</tabTrigger>
styles for Id:
#noty_element {
//your styles
}
class property :
<tabTrigger class="noty_element">noty</tabTrigger>
styles for Id:
.noty_element {
//your styles
}
For example, you can change the ink colour in paper-tabs by changing --paper-tab-ink: var(--accent-color);. Is it possible to change the value of the CSS custom properties dynamically similar to how you can toggle a class or change the style in JS?
There are different ways to do this, but a simple answer is to use the Polymer.updateStyles() method after making your class changes.
For example, let's say your styles are:
<style>
.yellow x-example {
--light-primary-color: #fdd85f;
}
.red x-example {
--light-primary-color: red;
}
</style>
and you want to make the component use the styles in the .red class. You simply add it as you normally would in javascript, then be sure to also use this function to actually update it on the page.
<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
<x-example></x-example>
</div>
Yes, first get the object of your custom element. Then get the customStyle object. Add a style to that object. And then run element.updateStyles();
t.clickListener= function(e) {
var t = Polymer.dom(e).localTarget; //retarget if needed
t.customStyle['--the-color-etc'] = 'pink';
t.updateStyles(); // mandatory for the CSS variables shim
};
See the docs