Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

7.6.2.56. useOverlay

useOverlay フックは、Web コンソールのページ構造の外側の DOM にコンポーネントを直接挿入します。これにより、CSS を使用してコンポーネントを自由にスタイル設定し、配置できるようになります。たとえば、オーバーレイを UI の右上隅に浮かせる場合は、style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }} のようになります。useOverlay を複数回呼び出すことで、複数のオーバーレイを追加できます。closeOverlay 関数がオーバーレイコンポーネントに渡されます。これを呼び出すと、useOverlay で追加された可能性のある他のオーバーレイに影響を与えることなく、DOM からコンポーネントが削除されます。追加の props を useOverlay に渡すことができ、それらはオーバーレイコンポーネントに渡されます。

例

const OverlayComponent = ({ closeOverlay, heading }) => {
  return (
    <div style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }}>
      <h2>{heading}</h2>
      <Button onClick={closeOverlay}>Close</Button>
    </div>
  );
};

const ModalComponent = ({ body, closeOverlay, title }) => (
  <Modal isOpen onClose={closeOverlay}>
    <ModalHeader title={title} />
    <ModalBody>{body}</ModalBody>
  </Modal>
);

const AppPage: React.FC = () => {
  const launchOverlay = useOverlay();
  const onClickOverlay = () => {
    launchOverlay(OverlayComponent, { heading: 'Test overlay' });
  };
  const onClickModal = () => {
    launchOverlay(ModalComponent, { body: 'Test modal', title: 'Overlay modal' });
  };
  return (
    <Button onClick={onClickOverlay}>Launch an Overlay</Button>
    <Button onClick={onClickModal}>Launch a Modal</Button>
  )
}

Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

会社概要

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

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

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

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

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

Legal Notice

Theme

© 2026 Red Hatトップに戻る