<button disabled={!session}
className={`button mt-2 ${!session && "from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor-not-allowed"}`}>
{!session ? 'Sign In to checkout' : 'Proceed to checkout'}
</button>
This is the code for it
Expected a gray background with a disabled button but got the following output -
This is the picture
Related
I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.
I want to change the appearance of a button when it its clicked to show an arrow coming out of it. I would like to do it using css. I am building a react application using typescript.
When the next button is clicked the arrow should be removed from the first one and go to the next one.
I have included a picture of the desired outcome.
Here is an example of 2 of the buttons:
<div className="button-container">
<Button
className="text-white font-nunito text active"
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
<Button
className="text-white font-nunito text mx-2 pr-15"
onClick={() => onFieldAdd('imageField')}
disabled={!!formId}
>
<AddPhotoAlternateIcon />
<p> Image</p>
</Button>
</div>
This could be the solution you're looking for:
import { useState } from "react";
const YourComponentName = () => {
const [selectedBtn, setSelectedBtn] = useState(null);
const hanldeClick = (e) => setSelectedBtn(e.target.id);
return (
<div>
<button id="btn1" onClick={hanldeClick} className={selectedBtn === "btn1" ? "hasArrow" : ""}>
Button 1
</button>
<button id="btn2" onClick={hanldeClick} className={selectedBtn === "btn2" ? "hasArrow" : ""}>
Button 2
</button>
// SAME THING FOR THE REST OF THE BUTTONS
</div>
)
}
export default YourComponentName;
Just customize it to suit your use case.
Here, I am initializing a state called selectedBtn to null by default, and listening for onClick events on all of the buttons to change that state to the clicked button id. Once it changes, component will rerenders and the CSS class hasArrow will be added to the appropriate button element by checking if selectedBtn state value is equal to the button id, with the help of the ternary conditional operator ?:.
I have this Formik Form with Yup validation :
<Form>
<div className="mt-3">
<label className="font-semibold">Nom</label>
<Field className={`mt-2 rounded-md w-full py-2 px-3 ${errors.lastname ? 'border-2 border-red-500 error-form error-form' : 'border'}`}
name="lastname"
type="text"
placeholder="Votre nom"
/>
{errors.lastname &&
<div className="text-red-500 text-sm">{errors.lastname}</div>}
[...]
</div>
I disable the verification before submit (because I didn't want the visitor to be alarmed on every input even before he filled it :
validateOnChange={false}
validateOnBlur={false}
Everything works fine. But now I want to set a green border on the input (when I click on Submit button) to the Fields that are OK for Yup.
I already do it with red borders when error.
I tried className={`mt-2 rounded-md w-full py-2 px-3 ${errors.message ? 'border-2 border-red-500 error-form' : 'border'} ${!errors.lastname ? 'border-2 border-green-500' : ''}`} but this set all my fields in green border even before the submit.
Any idea ?
Yes, it will be applied before you even submit the form as you're just checking if it has error or not. Obviously in the beginning, since there are no errors, all borders will be painted green.
Apply the same code conditionally on submit button click and it will work.
Or to make things more clean, you can dynamically add a class like form_submitted on submit click and then use the following CSS
.form_submitted input {
border-color: green;
}
.form_submitted input.error {
border-color: red;
}
I am using tailwind classes and below is my code. some people suggested to use classNames so used that as well, so similar code in both the newer and older format
const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";
className={classNames(
"w-20 my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
customClass,
backgroundColor,
{ "pointer-events-none": true }
)}
className={`w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : ""}
${customClass}`}
so in my customClass I have "w-60". but "w-20" is only getting applied. even it is happening for "bg-green-700" and I wanted it to be "bg-secondary-500" for disabled: true
so my disabled is coming as true and pointer-event-none is getting applied but secondary class is overridden by green class
I checked the DOM and both the bg class and both the width classes are available in the below order
<button class="w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200 w-60
bg-secondary-500 pointer-events-none">View Docs
</button>
so if anyone has any idea this is happening, please help
For merging Tailwind classes use https://github.com/dcastil/tailwind-merge instead of classNames
import { twMerge } from 'tailwind-merge'
// ...
className={twMerge(
"w-20 my-2 p-2 text-white bg-green-700 rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
disabled && "pointer-events-none bg-secondary-500",
customClass
)}
Here if I understood correctly , you want bg-secondary-500 when button is disabled. This can be done by this
className={`w-20 my-2 p-2 text-white rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-500 pointer-events-auto"}
`}
However you need to add any condtion if you want to change from w-20 to w-60. Else simply use w-60.
I'm looking for a way to check if my mat-menu is open so I can add a class to the button that opened it using [ngClass] based on the state of the menu.
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
You can use Material matMenuTrigger directive to check whether the menu is open or not
<button mat-button [matMenuTriggerFor]="menu" #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}
Check the example here: https://stackblitz.com/edit/angular-9hbzdw
Now you use ngClass binding to change the style of your button!
You can bind your method on "menuOpened", that method will be invoked whenever Menu is opened
<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
And add this method in your component,
isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}
Hope this helps.
I faced the same suituation. And I made a CSS work around.
While we click on the menu a custom aria tag is appended to the menu and get removed while we close the dropdoen. With this we can use CSS custom selector (It works with most mordern browsers)
.parentclass a[aria-expanded] { whatever you need }
Some case (if button)
.parentclass button[aria-expanded] { whatever you need }
Thanks,
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
<button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
<button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
</mat-menu>
selectedMenuItem = 1 // Initial value set to 1
onSelectMenuItem(id): void {
this.selectedMenuItem = id;
}
Sometimes you might face an issue with the mat-menu when your angular application uses the onPush changeDetection. So in that case you need to let Angular know that menu is open or closed.
Angular Material provides the event to detect if the menu is open or not.
menuOpened: Event emitted when the associated menu is opened.
menuClosed: Event emitted when the associated menu is closed.
Here is the code:
<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
(menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
Menu
<span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>