Chapitre 7. Plugins dynamiques


7.1. Aperçu des plugins dynamiques

7.1.1. A propos des plugins dynamiques

Un plugin dynamique vous permet d'ajouter des pages personnalisées et d'autres extensions à votre interface au moment de l'exécution. La ressource personnalisée ConsolePlugin enregistre les plugins avec la console, et un administrateur de cluster active les plugins dans la configuration console-operator.

7.1.2. Caractéristiques principales

Un plugin dynamique vous permet d'apporter les personnalisations suivantes à l'expérience OpenShift Container Platform :

  • Ajouter des pages personnalisées.
  • Ajouter des perspectives au-delà de l'administrateur et du développeur.
  • Ajouter des éléments de navigation.
  • Ajouter des onglets et des actions aux pages de ressources.

7.1.3. Lignes directrices générales

Lors de la création de votre plugin, suivez ces lignes directrices générales :

  • Node.js et yarn sont nécessaires à la construction et à l'exécution de votre plugin.
  • Préfixez les noms de vos classes CSS par le nom de votre plugin pour éviter les collisions. Par exemple, my-plugin__heading et my-plugin_\_icon.
  • Veiller à la cohérence de l'aspect, de la convivialité et du comportement avec les autres pages de la console.
  • Suivez les directives de localisation de react-i18next lors de la création de votre plugin. Vous pouvez utiliser le crochet useTranslation comme dans l'exemple suivant :

    conster Header: React.FC = () => {
      const { t } = useTranslation('plugin__console-demo-plugin');
      return <h1>{t('Hello, World!')}</h1>;
    };
  • Évitez les sélecteurs qui pourraient affecter le balisage en dehors des composants de votre plugin, tels que les sélecteurs d'éléments. Ce ne sont pas des API et ils sont susceptibles d'être modifiés. Leur utilisation peut endommager votre plugin. Évitez les sélecteurs comme les sélecteurs d'éléments qui pourraient affecter le balisage en dehors des composants de votre plugin.

Lignes directrices de PatternFly 4

Lors de la création de votre plugin, suivez les instructions suivantes pour l'utilisation de PatternFly :

  • Utilisez les composants PatternFly4 et les variables CSS PatternFly. Les composants de base de PatternFly sont disponibles via le SDK. L'utilisation des composants et des variables PatternFly permet à votre plugin d'être cohérent dans les futures versions de la console.
  • Rendez votre plugin accessible en suivant les principes fondamentaux d'accessibilité de PatternFly.
  • Évitez d'utiliser d'autres bibliothèques CSS telles que Bootstrap ou Tailwind. Elles peuvent entrer en conflit avec PatternFly et ne correspondront pas à l'apparence de la console.
Red Hat logoGithubRedditYoutubeTwitter

Apprendre

Essayez, achetez et vendez

Communautés

À propos de la documentation Red Hat

Nous aidons les utilisateurs de Red Hat à innover et à atteindre leurs objectifs grâce à nos produits et services avec un contenu auquel ils peuvent faire confiance.

Rendre l’open source plus inclusif

Red Hat s'engage à remplacer le langage problématique dans notre code, notre documentation et nos propriétés Web. Pour plus de détails, consultez leBlog Red Hat.

À propos de Red Hat

Nous proposons des solutions renforcées qui facilitent le travail des entreprises sur plusieurs plates-formes et environnements, du centre de données central à la périphérie du réseau.

© 2024 Red Hat, Inc.