web-dev-qa-db-fra.com

Table modifiable dans la conception des matériaux

nous concevons une application web dans la conception de matériaux et nous avons là une table modifiable - quelque chose comme ceci:

Copied from material design specification

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.

Material design - editable table

Serait-il préférable de n'autoriser la modification que pour toute la ligne?

Merci.

15
Jaroslav M

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. [enter image description here
Gardez le texte sélectionnable:
enter image description here
Et ajoutez un gestionnaire de clics sur l'icône de modification elle-même:
enter image description here

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:

enter image description here

10
jazZRo

Une alternative pourrait être l'édition en ligne au survol. Afficher uniquement les champs modifiables . enter image description here

5
VADO

La suggestion de conception matérielle semble correcte. Une icône d'édition par ligne, ce qui rend chaque champ de cette ligne modifiable. Vous pouvez ajouter "Modifier la ligne" pour rendre plus clair ce qui se passera.

For Example

3
Pectoralis Major

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).

enter image description here

enter image description here

3
Lumiq Creative