⚠️ Traduction non officielle - Cette documentation est une traduction communautaire non officielle de Docker.

Aperçu du style UI pour les extensions Docker

Table des matières

Notre Système de Conception est un ensemble de spécifications en constante évolution qui vise à assurer la cohérence visuelle à travers les produits Docker, et à respecter les standards d'accessibilité niveau AA. Nous avons ouvert des parties de celui-ci aux auteurs d'extensions, en documentant les styles de base (couleur, typographie) et les composants. Voir : Guide de Style des Extensions Docker.

Nous exigeons que les extensions correspondent à l'UI Docker Desktop plus large dans une certaine mesure, et nous nous réservons le droit de rendre cela plus strict à l'avenir.

Pour commencer sur votre UI, suivez les étapes ci-dessous.

Étape 1 : Choisir votre framework

Recommandé : React+MUI, en utilisant notre thème

L'UI de Docker Desktop est écrite en React et MUI (utilisant Material UI de manière spécifique). C'est le seul framework officiellement supporté pour construire des extensions, et celui que notre commande init configure automatiquement pour vous. L'utiliser apporte des avantages significatifs aux auteurs :

  • Vous pouvez utiliser notre thème Material UI pour répliquer automatiquement l'apparence et la sensation de Docker Desktop.
  • À l'avenir, nous publierons des utilitaires et composants ciblant spécifiquement cette combinaison (par exemple, composants MUI personnalisés, ou hooks React pour interagir avec Docker).

Lisez notre guide des meilleures pratiques MUI pour apprendre des façons pérennes d'utiliser MUI avec Docker Desktop.

Non recommandé : Un autre framework

Vous pourriez préférer utiliser un autre framework, peut-être parce que vous ou votre équipe êtes plus familiers avec celui-ci ou parce que vous avez des ressources existantes que vous voulez réutiliser. C'est possible, mais fortement déconseillé. Cela signifie que :

  • Vous devrez répliquer manuellement l'apparence et la sensation de Docker Desktop. Cela demande beaucoup d'effort, et si vous ne correspondez pas assez étroitement à notre thème, les utilisateurs trouveront votre extension discordante et nous pourrions vous demander de faire des changements pendant un processus de révision.
  • Vous aurez un fardeau de maintenance plus élevé. Chaque fois que le thème de Docker Desktop change (ce qui pourrait arriver dans n'importe quelle version), vous devrez changer manuellement votre extension pour le correspondre.
  • Si votre extension est open-source, éviter délibérément les conventions communes rendra plus difficile pour la communauté d'y contribuer.

Étape 2 : Suivre les recommandations ci-dessous

Suivre nos meilleures pratiques MUI (si applicable)

Voir notre article meilleures pratiques MUI.

Utiliser uniquement les couleurs de notre palette

Avec des exceptions mineures, afficher votre logo par exemple, vous devriez utiliser uniquement les couleurs de notre palette. Celles-ci peuvent être trouvées dans notre document de guide de style, et seront également bientôt disponibles dans notre thème MUI et via des variables CSS.

Utiliser des couleurs homologues en mode clair/sombre

Nos couleurs ont été choisies de sorte que les couleurs homologues dans chaque variante de la palette devraient avoir les mêmes caractéristiques essentielles. Partout où vous utilisez red-300 en mode clair, vous devriez utiliser red-300 en mode sombre aussi.

Et ensuite ?