Positionnement du bouton modal sur mobile
Je suis en train de concevoir un système de conception pour mon entreprise et j'étudie actuellement la conception des modaux et des dialogues pour le bureau (tablette aussi) et mobile.
J'ai placé l'action principale en bas à droite du modal et toute action secondaire, comme annuler ou "enregistrer le brouillon" sur la gauche. Cela utilise simplement des flotteurs CSS.
Cependant sur mobile, je ne sais pas comment positionner les boutons s'il y en a plus de deux. S'il y avait juste annuler et soumettre, soit cela irait sur une seule ligne en fonction de la taille de l'écran, soit ils s'empileraient (j'ai juste besoin de mettre à jour le CSS pour que cela se produise) les uns sur les autres, ce qui devrait également fonctionner correctement pour le utilisateur.
Cependant s'il y en a plus de 2, l'ordre s'ils empilent tous ne sera pas particulièrement intuitif pour l'utilisateur.
ignorer le glitchiness - je peux résoudre ce problème juste avec un peu de CSS, mais je voulais obtenir des opinions d'autres qui ont peut-être conçu quelque chose de similaire.
Les empiler comme -
Annuler
SaveDraft
Soumettre
Cela n'aurait pas vraiment de sens, mais
AnnulerEnregistrer le brouillon
Soumettre
J'apprécierais vraiment toute aide pour me faire connaître les modèles courants ici?
Merci beaucoup
Soumettez qu'il s'agit du bouton le plus important de votre formulaire, vous pouvez donc le faire sur toute la largeur de la deuxième ligne. Les autres boutons peuvent avoir une largeur de 50%, sur la première rangée. Vous pouvez vérifier cette approche dans les Material Design Guidelines :
Vous pouvez supprimer le bouton "Annuler". Étant une interface utilisateur plus petite sur mobile, les utilisateurs peuvent repérer le bouton de fermeture (X) pour la même action.
Vous pouvez ajouter un bouton déroulant avec les deux actions au lieu de deux boutons séparés.
Par exemple:
