mirror of
https://github.com/openshift/openshift-docs.git
synced 2026-02-05 21:46:22 +01:00
44 lines
2.3 KiB
Plaintext
44 lines
2.3 KiB
Plaintext
// Module is included in the following assemblies:
|
||
//
|
||
// * openshift-docs/web_console/dynamic-plug-ins.adoc
|
||
|
||
:_content-type: CONCEPT
|
||
[id="about-dynamic-plugins_{context}"]
|
||
= About dynamic plug-ins
|
||
|
||
A dynamic plug-in allows you to add custom pages and other extensions to your interface at runtime. The `ConsolePlugin` custom resource registers plug-ins with the console, and a cluster administrator enables plug-ins in the `console-operator` configuration.
|
||
|
||
[id="dynamic-plugins-features"]
|
||
== Key features
|
||
|
||
A dynamic plug-in allows you to make the following customizations to the {product-title} experience:
|
||
|
||
* Add custom pages.
|
||
* Add perspectives and update navigation items.
|
||
* Add tabs and actions to resource pages.
|
||
|
||
== PatternFly 4 guidelines
|
||
When creating your plug-in, follow these guidelines for using PatternFly:
|
||
|
||
* Use link:https://www.patternfly.org/v4/[PatternFly4] components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables will help your plug-in look consistent in future console versions.
|
||
* Make your plug-in accessible by following link:https://www.patternfly.org/v4/accessibility/accessibility-fundamentals/[PatternFly's accessibility fundamentals].
|
||
* _Do not_ use other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.
|
||
|
||
[id="general-plug-in-guidelines"]
|
||
== General guidelines
|
||
When creating your plug-in, follow these general guidelines:
|
||
|
||
* Prefix your CSS class names with your plug-in name to avoid collisions. For example, `my-plugin_\_heading` and `my-plugin_\_icon`.
|
||
* Maintain a consistent look, feel, and behavior with other console pages.
|
||
* Follow link:https://www.i18next.com/[react-i18next] localization guidelines when creating your plug-in. You can use the `useTranslation` hook like the one in the following example:
|
||
+
|
||
[source,ymal]
|
||
----
|
||
conster Header: React.FC = () => {
|
||
const { t } = useTranslation('plugin__console-demo-plugin');
|
||
return <h1>{t('Hello, World!')}</h1>;
|
||
};
|
||
----
|
||
|
||
* _Do not_ use console CSS classes in your markup or override console CSS classes. These are not APIs and are subject to change. Using them might break your plug-in. Avoid selectors like element selectors that could affect markup outside of your plug-in’s components.
|