I am working on VueJS below is my css
.button-css {
align-items: center;
background-color: var(--azure-radiance);
border-radius: 30px;
display: flex;
height: 50px;
min-width: 200px;
padding: 0 60px;
}
.opensans-bold-white-18px {
color: var(--white);
font-family: var(--font-family-open_sans);
font-size: var(--font-size-xxxl);
font-style: normal;
font-weight: 700;
align-self: center;
}
and followed by Vue script
new Vue({
el: "#app",
data: {
termsState: false,
validated: false
},
computed: {
termsError() {
return this.validated && !this.termsState
}
},
methods: {
handleTermsState() {
this.validated = false
},
handleSubmit() {
this.validated = true
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<label for="terms">
Terms and Privacy Policy
<input type="checkbox" id="terms" name="terms" v-model="termsState" #change="handleTermsState">
{{ termsState }}
</label>
<div><button class="button-css opensans-bold-white-18px" type="submit" :disabled="!termsState" #click="handleSubmit">Submit</button></div>
</div>
The button retains the CSS only when it is enabled i.e 'oval shape button' when checkbox is ticked, when it is disabled it takes a gray rectangular shape button. I want to retain the shape of button as gray oval shape button disabled mode how to achieve it?
Below is the before and after images
I want both before and after images to be the oval shape
Actually it has nothing to do with Vue. All you have to do is to modify your CSS like this:
First remove the color property:
.opensans-bold-white-18px {
/* color: var(--white); */
font-family: var(--font-family-open_sans);
font-size: var(--font-size-xxxl);
font-style: normal;
font-weight: 700;
align-self: center;
}
Second, change your button css class to bind a computed property like this:
<button :class="cssClass" type="submit" :disabled="!termsState" #click="handleSubmit">Submit</button>
And add your computed property:
computed: {
cssClass() {
return "overlap-group-23 opensans-bold-white-18px button-css " + (this.termsState ? "button-enabled" : "");
}
}
Tested on both Safari and Chrome.
Is this what you want?
Related
I am trying to change the border color of the Material UI TextField component using Modular CSS, but when I try to, it does not work.
CSS (In Styles.module.css):
.formInput {
font-size: 18px !important;
font-family: Roboto, serif !important;
color: #057FA8 !important;
border-color: #057FA8 !important;
}
.formInput:hover {
border-color: #057FA8 !important;
}
JS:
import styles from './Styles.module.css';
...
<TextField id="name" name="name" label="Name" className={styles.formInput} value={formik.values.name} onChange={formik.handleChange}
error={Boolean(formik.errors.name)} helperText={formik.errors.name}
onBlur={(e) => {
e.preventDefault();
formik.validateField('name');
formik.setFieldTouched('name');
}}
margin='normal'
fullWidth
variant="outlined"
/>
Any help would be greatly appreciated.
Material UI V4 provides a classes property on TextField that lets you style the internal components.
Based on this example you should be able to try:
/* LABEL STYLES */
.formInput label.Mui-focused
{
color: #057FA8 !important;
font-size: 18px;
font-family: Roboto, serif
}
/* INPUT FONT STYLES (on wrapper element not input directly) */
.formInput .MuiOutlinedInput-root
{
font-size: 18px;
font-family: Roboto, serif
}
/* BORDER COLOR */
.formInput .MuiOutlinedInput-root fieldset
{
border-color: #057FA8;
}
/* BORDER COLOR ON HOVER */
.formInput .MuiOutlinedInput-root:hover fieldset
{
border-color: #057FA8
}
/* BORDER COLOR ON FOCUS*/
.formInput .MuiOutlinedInput-root.Mui-focused fieldset
{
border-color: #057FA8
}
and
import styles from './Styles.module.css';
const classes = { root: styles.formInput };
const ExampleComponent = () => {
return (
<TextField
id="name"
name="name"
label="Name"
classes={classes}
margin='normal'
fullWidth
variant="outlined"
/>
)
}
When I only use class name like error and info the css works
Example: https://stackblitz.com/edit/github-i4uqtt-zrz3jb (using Angular latest version)
but when I renamed the css class and add more styles like for the example below the css and [ngClass] no longer work. Any idea guys ?
#HTML
<div fxLayout="row" fxLayoutAlign="space-between">
<div fxLayout="column" fxFlex="0 0 7%">
<mat-icon
[ngClass]="password.hasError('mininum') ? 'error-check-outline' : 'info-check-outline'">
check_circle_outline </mat-icon>
</div>
<div fxLayout="column" fxFlex="0 0 100%">
<span
[ngClass]="password.hasError('mininum') ? 'text-info-error' : 'text-info'">
8 characters mininum</span>
</div>
</div>
#ts
validateMinimumPassword: ValidatorFn = (control: AbstractControl) => {
if (control.value.length < 8) {
return { minimum: true };
}
return null;
};
#CSS
.text-info {
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: #4caf50;
font-family: Manrope;
margin-top: 2.5px;
}
.text-info-error {
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: #DDD;
font-family: Manrope;
margin-top: 2.5px;
}
.error-check-outline {
transform: scale(.74);
color: #DDD;
}
.info-check-outline {
transform: scale(.74);
color: #4caf50;
}
You have to wrap your ngClass condition in {} also change syntax
For Example:
[ngClass]="{'error-check-outline': password.hasError('minimum'), 'info-check-outline' : !password.hasError('minimum'
)}"
Everything should work, if you correct your typo mininum. Its minimum.
Working example: https://stackblitz.com/edit/so-68358839
Update: Why its green
You have the expression "password.hasError('mininum') ? 'text-info-error' : 'text-info'"
The ternary(conditional) operator syntax is like,
condition ? exprIfTrue : exprIfFalse
You gave password.hasError('mininum') and as it has a typo it returns null, which is falsey. So now the expression on the left is false,
and the .text-info will get selected. As that style makes the color green, it will become green.
you can write a method to return class based on condition
setClass(type) {
if (type == 'minimum') {
return 'class-one';
} else if (type == 'maxmimum') {
return 'class-two';
}
}
and then use this method in HTML like below
<div [ngClass]="setClass('minimum')"><div>
using this way you can clean your HTML
This is my situation:
I have a web app that allow users to change the UI size. (i.e. small, medium or large button)
Users can change how it looks like dynamically during runtime. All text and form input boxes will be resized.
My project is in Vue.js.
What is the best way to solve this? Loading different css when user click?
Load different CSS while user click the button similar to this . Codepen : https://codepen.io/anon/pen/NJEoVM
HTML
<div id="app" :class="size">
<div class="text">Text</div>
<input class="ipt"/><br/><br/>
<button class="btn" #click="change('small')">Small</button>
<button class="btn" #click="change('medium')">Medium</button>
<button class="btn" #click="change('large')">Large</button>
</div>
CSS
.small .ipt{
width: 100px;
height:30px;
}
.small .text{
font-size: 18px;
}
.medium .ipt{
width: 300px;
height:50px;
}
.medium .text{
font-size: 32px;
}
.large .ipt{
width: 600px;
height:100px;
}
.large .text{
font-size: 64px;
}
Javascript
new Vue({
el: '#app',
data:()=>({
size:'small'
}),
methods:{
change(val){
this.size = val
}
}
});
Actually, you can make use of Custom Properties aka CSS variables.
Firstly, define the button CSS styles
/* button.css */
#buttonRef {
--fontSize: 16px;
font-size: var(--fontSize)
}
The overall flow would be something like the following one e.g
methods: {
changeButtonSize: function(size, event) {
event.preventDefault();
/* size might be either of 's', 'm', 'l' */
/* let the button ref is stored in refs */
const buttonRef = this.$refs[“buttonRef”];
let fontSize = 16;
switch(size) {
case 's':
fontSize = 12;
case 'm':
fontSize = 18;
case 'l':
fontSize = 22;
}
/* dynamically change the value for custom property */
buttonRef.style.setProperty("--fontSize", fontSize);
}
}
you can set up 3 classes:
.small {font-size:12px}
.medium {font-size:18px}
.large {font-size:24px}
Then add or remove them to your main parent div onClick.
If you have discreetly set the font-size on the elements, you'll have to target those elements as such:
.small .description { font-size:12px }
.small .title{ font-size:16px }
I use a polymer paper-spinner inside my web-component:
<dom-module id="custom-spinner">
<style include = 'custom-spinner-styles'>
paper-spinner.yellow{
--paper-spinner-layer-1-color: yellow;
--paper-spinner-layer-2-color: yellow;
--paper-spinner-layer-3-color: yellow;
--paper-spinner-layer-4-color: yellow;
}
</style>
<template>
<div class = "loader">
<paper-spinner class$="{{color}}"></paper-spinner>
</div>
<content>
</content>
</template>
</dom-module>
<script>
etc....
</script>
I use it like this:
<custom-spinner color = "yellow" size = "200px" fade-in-sp = "500" fade-out-sp = "400"></custom-spinner>
Now the problem is, that the data-binding works and the paper-spinners class is set to yellow, but the styles are not applied.
If I set 'yellow' directly it works perfectly:
<paper-spinner class="yellow"></paper-spinner>
Any ideas where the problem is?
Help would be greatly appreciated.
I am using data-binding for Styling in my gold-password-input and it is working like this:
.None {
color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important;
}
.VeryWeak {
color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700) !important;
}
.Weak {
color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700) !important;
}
.Medium {
color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700) !important;
}
.Strong {
color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700) !important;
}
.VeryStrong {
color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important;
}
and
<span id="strengthLabel">
[[strengthMeterLabels.Label]]:
<span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span>
<paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button>
</span>
Here is the code, very simple and copy paste from office website
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: 'Delete Photo',
titleText: 'Modify your album',
cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
I want to change the cancel button have a red color background, how I can achieve it in ionic frameworks?
Easiest way is to look at the markup using your browser (after running ionic serve in your terminal), for example in Chrome ctrl+shift+i, where you can choose the button and see what classes are attached. In your case you'll see something like this:
<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
<button class="button ng-binding"
ng-click="cancel()"
ng-bind-html="cancelText">Cancel</button>
</div>
Which has styles that for the parent div, and child button something like this:
.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
Just change these values either in Sass or directly in your styles sheet if you're not using Sass.