nous concevons une application web dans la conception de matériaux et nous avons là une table modifiable - quelque chose comme ceci:
Une suggestion sur la façon d'indiquer les champs modifiables, si toutes les colonnes ne sont pas modifiables? Disons que dans cet exemple, les protéines et les commentaires seraient modifiables - comment devrions-nous visualiser cela?
J'ai trouvé cette suggestion dans la spécification de conception matérielle, mais que se passe-t-il si plusieurs colonnes d'affilée sont modifiables? Le tableau deviendrait encombré d'icônes si nous les plaçons dans chaque cellule modifiable.
Serait-il préférable de n'autoriser la modification que pour toute la ligne?
Merci.
Si vous souhaitez garder le tableau propre, n'affichez que l'icône de modification sur la cellule survolée: vous pouvez spécifier les cellules modifiables en affichant l'icône ou non.
Gardez le texte sélectionnable:
Et ajoutez un gestionnaire de clics sur l'icône de modification elle-même:
Je recommanderais de ne pas utiliser l'édition en ligne, car les largeurs de colonne peuvent être petites et difficiles à modifier. Utilisez un pop-up/-over ou un modal ou quelque chose comme ça:
Bien que les tableaux de Material Design n'aient généralement aucun type de contour, dans votre cas, une bonne idée serait d'utiliser des interfaces utilisateur de champs de texte modifiables aux endroits où vous souhaitez indiquer que les champs peuvent être modifiés. Vous trouverez ci-dessous deux images, la première montrant un champ sans texte à l'intérieur (et avec un espace réservé), et la seconde avec du texte entré. Pour que tout soit plus lisible, je recommanderais de retirer l'étiquette supérieure dans le champ de texte rempli (voir image deux), car l'étiquette est déjà présente en haut du tableau (donc le rempli dans le champ ressemble à celui vide mais avec un texte noir plus visible pour différencier les autres états).