Tailwind CSS : Créer un bouton en forme de pilule

J'ai ce bouton : <buttononClick={()=>removeTask(task)}class="text-xstext-redrounded-full">Supprimer</button> J'aimerais voir quelque chose de similaire : https://tailwindcss.com /docs/border-radius#pill-buttons Cependant, je n'arrive pas à appuyer sur la forme de la pilule.

P粉189606269 2024-03-26 20:59:03 0  1  446

Tanstack Table et React JS : Comment afficher/masquer les boutons en fonction de l'état lors de l'utilisation de React JS et Tanstack Table

J'ai réagi js et implémenté une table tanstack (react-table). J'ai besoin d'aide pour afficher ou masquer les boutons/liens en fonction de l'état de chaque ligne. Supposons que s'il y a une ligne contenant le statut, le bouton "Approuver" sera affiché, sinon il sera masqué. ......someiniti...

P粉042455250 2023-09-02 23:04:17 0  2  729

Re-rendu à l'aide de React.StrictMode et de l'instance Canvas de fabric.js

Je crée une toile en tissu et des boutons qui instancient des formes qui doivent être sélectionnables. Je ne comprends pas pourquoi mon composant est restitué deux fois dans la situation suivante. Par conséquent, la forme de mon tissu ne peut pas être sélectionnée. Cependant, lorsque je le supprime ...

P粉659378577 2023-09-21 23:48:52 0  1  897

Les boutons sur mobile restent focalisés ou actifs, provoquant des problèmes avec les animations CSS

J'essaie de réaliser une animation à chaque fois que je clique sur un bouton, cela fonctionne bien sur le bureau mais je ne parviens pas à obtenir le même effet sur mobile. Je dois d'abord cliquer sur le bouton, puis cliquer ailleurs pour défocaliser le CSS, puis cliquer à nouveau sur le bouton pour...

P粉043295337 2023-08-28 15:14:37 0  1  542

Bouton avec texte et icône centrés

Je développe un composant bouton avec une icône et du texte. L'icône est placée à gauche du bouton et le texte est aligné au milieu du bouton. Si le texte ne peut pas tenir dans le bouton, il ne doit pas être renvoyé à la ligne mais peut être tronqué. La condition clé pour tronquer du texte est que ...

P粉033429162 2023-08-15 11:01:09 0  1  545

L'activation du bouton provoque un dysfonctionnement de l'effet de survol

J'ai essayé d'apprendre les bases du développement Web (HTML, CSS et JS), j'ai donc essayé de créer une calculatrice Apple fonctionnelle. Tout fonctionnait bien jusqu'à ce que je remarque un petit bug. Au début, l'effet de survol sur le bouton d'action fonctionnait très bien, la couleur devenait plu...

P粉548512637 2024-04-01 21:51:26 0  1  608

CSS pour ajouter une ombre/une bordure à chaque bouton lorsque les boutons d'amorçage sont actifs

J'utilise le framework React pour créer le frontend et Bootstrap5.3 pour la conception. D'après ce que j'ai compris, Bootstrap a désormais supprimé l'effet d'ombre en standard. Ainsi, si le bouton est actif, il n'affichera pas d'ombre/bordure, comme dans la documentation Bootstrap v5.0. https://getb...

P粉256487077 2023-08-17 23:54:27 0  1  529

Créez un effet de survol qui transforme le bouton de menu en forme de X avec une version clone ombré

Tout d'abord, je tiens à admettre que mon titre prête à confusion et j'en suis désolé. Ce que je veux obtenir, c'est l'effet suivant en survol : Mon site Web est ici https://wordpress-493302-3130963.cloudwaysapps.com/ J'ai accompli avec succès la moitié de ce que je veux réaliser en utilisant les tr...

P粉546257913 2024-04-04 11:55:21 0  2  510

javascript - Événement coller sur terminal mobile, l'événement onpaste n'est pas valide dans l'application, comment détecter l'événement coller dans l'application

Événement de collage du terminal mobile, l'événement onpaste n'est pas valide dans l'application. Comment surveiller l'événement de collage dans l'application, c'est-à-dire qu'après avoir collé le code de vérification, surveillez l'événement de collage si la valeur de la zone de texte pour remplir l...

黄舟 2017-05-16 13:23:57 0  1  810

Pourquoi les formulaires useState et de mise à jour fonctionnelle dans React sont-ils nécessaires ?

Je lisais la documentation sur la mise à jour de la fonction ReactHook et j'ai vu cette phrase : les boutons "+" et "-" utilisent une forme fonctionnelle car la valeur mise à jour est basée sur la valeur précédente mais je ne vois pas quel est le but de la mise à jour de la fonct...

P粉041856955 2023-08-24 13:38:45 0  2  540

Pourquoi avez-vous besoin d'utiliser React useState sous forme de mises à jour fonctionnelles ?

Je lis la documentation de ReactHook sur les mises à jour des fonctionnalités et je regarde la citation suivante : Les boutons "+" et "-" utilisent une forme fonctionnelle car la valeur mise à jour est basée sur la valeur précédente mais je ne vois pas à quoi sert Les mises à jou...

P粉155551728 2023-10-22 15:37:50 0  2  755

Impossible d'ajouter un nœud ou une forme dans Jsplumb Community Edition

J'utilise @jsplumb/browser-ui pour créer des nœuds dans mon application Nuxtjs/Vuejs comme décrit dans sa documentation. Mais je veux créer des nœuds au moment de l'exécution. Je ne peux pas le faire. Je souhaite créer des formes de nœuds/rectangles chaque fois que l'utilisateur clique sur le bouton...

P粉864872812 2024-03-28 21:22:23 0  1  421

Bouton de téléchargement d'image à partir d'un serveur tiers

Dans n'importe quel navigateur, si vous voyez une image, vous pouvez cliquer dessus avec le bouton droit et cliquer sur « Enregistrer sous » pour la télécharger. J'essaie de créer un bouton qui télécharge une image. Le bouton de téléchargement doit télécharger l'image ci-dessus, le code-barres. J'ut...

P粉198670603 2024-02-21 14:47:20 0  1  398

javascript - Comment obtenir certaines valeurs $index en répétition dans AngularJS?

{Code...} {Code...} Mon exigence est de redemander l'état de ces délais d'attente après avoir cliqué sur le bouton "Obtenir l'index des délais d'attente". Si la demande réussit, le délai d'attente sera affiché comme étant activé. la demande circulaire Parfois, le délai d'attente expire, do...

阿神 2017-05-16 13:19:43 0  1  799

javascript - Pourquoi ne puis-je pas accéder aux services locaux après la mise à niveau de Chrome vers la version 55 ?

La société crée une fonction d'impression côté client. Après avoir installé le client, un service 127.0.0.1:8801 sera démarré. Ensuite, cliquer sur le bouton d'impression sur le site Web fera une requête inter-domaine ajax à http://127.0.0.1. :8801/. Si installé Si le client est connecté, cette inte...

typecho 2017-06-15 09:22:56 0  1  740

Comment réinitialiser l'état de l'application Nuxt à la déconnexion ?

Lorsque l'utilisateur quitte l'application, l'état authStore persistant de Pinia est réinitialisé et l'utilisateur est redirigé vers /login. Cependant, si l'utilisateur suivant se connecte sans actualiser la page, la page principale affiche toujours les données de l'utilisateur précédent car elles s...

P粉706038741 2023-09-16 20:59:12 0  1  696

Avertissement React : la profondeur de mise à jour a dépassé la limite maximale lors de la mise à jour de l'état dans useEffect

J'essaie de mettre à jour ma variable d'état qui est un objet contenant une variable booléenne. Une fois les données disponibles (en réponse à un appel API invoqué lors d'un clic sur un bouton), je mets à jour mon état dans useEffect. Ensuite, avec ces données, j'appelle un autre composant, un modal...

P粉447785031 2023-09-06 13:46:55 0  1  581

Créez des panneaux de signalisation évolutifs en utilisant HTML, CSS et SVG

Je souhaite réaliser un bouton en forme de panneau (un rectangle avec une pointe). _______|\|_______/Je souhaite écrire dynamiquement du texte dans un logo, chaque texte ayant une longueur différente. Si j'essaie cela en utilisant uniquement le graphique comme graphique d'arrière-plan, les flèches s...

P粉555682718 2024-03-31 14:45:14 0  1  492

La fonction de Vue Pinia n'est pas définie dans onMounted lors de l'exécution de tests unitaires

J'ai un composant et un magasin Pinia qui contient l'état et quelques actions. Le code fonctionne parfaitement dans les tests de navigateur et E2E (cyprès), mais échoue dans les tests unitaires. J'utilise vue-testing-utils et vitest. Lorsqu'un bouton est cliqué, la fonction stockée est appelée corre...

P粉103739566 2023-10-31 21:58:42 0  1  813

Lors de la sélection de différentes options, le type de champ de saisie peut prendre en charge une roupie à 20 chiffres avec le symbole de la roupie ou être remplacée par un pourcentage.

Si l'option est sélectionnée pour sélectionner une valeur fixe, le type de champ de saisie est La valeur Roupie ne prend en charge que 20 chiffres avec le symbole Roupie. Si le pourcentage est sélectionné, le symbole de la roupie est remplacé par le symbole de pourcentage et le type de valeur n'est ...

P粉022140576 2023-08-13 18:35:32 0  1  484