検索

第7章 動的プラグイン

download PDF

7.1. 動的プラグインの概要

7.1.1. 動的プラグインについて

動的プラグインを使用すると、実行時にカスタムページおよびその他のエクステンションをインターフェイスに追加できます。ConsolePlugin カスタムリソースはコンソールと共にプラグインを登録し、クラスター管理者は console-operator 設定でプラグインを有効にします。

7.1.2. 主な特長

動的プラグインを使用すると、以下のカスタマイズを OpenShift Container Platform エクスペリエンスに設定することができます。

  • カスタムページの追加。
  • 管理者と開発者を超えたパースペクティブを追加します。
  • ナビゲーション項目の追加。
  • リソースページへのタブおよびアクションの追加。

7.1.3. 全般的なガイドライン

プラグインの作成時には、以下の一般的なガイドラインに従ってください。

  • プラグインをビルドして実行するには、Node.jsyarn が必要です。
  • CSS クラス名の前にプラグイン名を付けて、競合を回避します。例: my-plugin__heading および my-plugin_\_icon
  • 他のコンソールページとの一貫したルック、フィール、および動作を維持します。
  • プラグインの作成時には、react-i18next のローカリゼーションガイドラインに従ってください。以下の例のように useTranslation フックを使用できます。

    conster Header: React.FC = () => {
      const { t } = useTranslation('plugin__console-demo-plugin');
      return <h1>{t('Hello, World!')}</h1>;
    };
  • 要素セレクターなど、プラグインコンポーネント外のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。これらを使用すると、プラグインが破損する可能性があります。プラグインコンポーネント外のマークアップに影響を与える可能性のある要素セレクターなどのセレクターを回避します。

PatternFly ガイドライン

プラグインを作成する場合は、PatternFly の使用に関する以下のガイドラインに従ってください。

  • PatternFly コンポーネンツと PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。Pattern Fly コンポーネントと変数を使用すると、将来のコンソールバージョンでプラグインが一貫しているように見えます。
  • PatternFly’s accessibility fundamentals に従って、プラグインにアクセスできるようにします。
  • Bootstrap や Tailwind などの他の CSS ライブラリーは使用しないでください。これらは、PatternFly と競合する可能性があり、コンソールのルックアンドフィールとは一致しません。
Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.