Astro の再利用可能なモーダル コンポーネント

今日は、Astro で再利用可能なモーダル コンポーネントを作成します.

アイデアは、HTML セマンティクスに従い、モーダル ポップアップをトリガーできる 1 つのコンポーネントを持つことです.

このポップアップのコンテンツは何でも構いませんが、このコンポーネントを動的に使用したいと考えています.

最終結果は次のようになります.

コンポーネントの作成

前に Astro プロジェクトがセットアップされていることを確認してください.まだ持っていない場合は、私の Astro starter project をチェックしてください.
Modal.astro フォルダー内に components という新しいコンポーネントを追加します.

コンポーネントは、このモーダルの ID と開くボタンのテキストの 2 つのプロパティを受け取る必要があります.

---
const {id, open} = Astro.props;
---

これらの 3 つのドットは frontmatter として知られており、Astro コンポーネントに JavaScript を含めるために使用できます.

次に、モーダルを開くことができるボタンをレンダリングします.

<button onclick="{`window.${id}.showModal()`}">{open}</button>

ここで行うことは、クリック リスナーをこのボタンにバインドすることです.そこで、このモーダルの一意の ID を渡します.
次に、ボタンに open 変数を設定します.これはボタン上のテキストです.

ウィンドウの showModal 関数は、ダイアログを呼び出すためのネイティブ ブラウザー関数です.
この方法を使用すると、背景オプションが得られ、このモーダルのスタイルを簡単に設定できます.

次に必要なのは、実際のダイアログ要素です.

<dialog id="{id}">
  <slot name="main" />
  <form method="dialog">
    <slot name="close" />
  </form>
</dialog>

ご覧のとおり、ID をこのダイアログ要素の一意の ID として渡します.この ID を使用して、上のボタンで見たように開くことができます.

次に、メイン コンテンツ用のスロットを渡します. (スロットについては後で詳しく説明します)
そして、閉じたスロットを持つフォームを追加します.これが必要なのは、このダイアログ フォーム内のボタンが押されるとネイティブ ダイアログが閉じるためです. (ここでは method="dialog" が重要です).

フロントマターの下に最後に追加したいのは、いくつかの基本的なスタイリングです.

<style lang="scss">
  dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &::backdrop {
      position: fixed;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background: rgba(255, 0, 0, 0.1);
    }
  }
</style>

これにより、いくつかの基本的なスタイルが追加され、ダイアログがページの中央に配置され、背景に色が付けられます.

Astro モーダル コンポーネントの使用

次に、このモーダル コンポーネントを使用します.それがどのように機能するか見てみましょう.pages/index.astro ファイルを開き、フロントマター パーツにコンポーネントをインポートします.

--------
// Component Imports
import Modal from '../components/Modal.astro';
--------

これを使用するには、次のように HTML と入力します.

<Modal id="dialog" open="Open modal">
  <main slot="main">
    <p>Some extra content you would like here</p>
    <hr />
    <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" />
  </main>
  <button slot="close">Close modal</button>
</Modal>

かなりクール!

何が起こっているのかをもう少し詳しく見てみましょう.Modal コンポーネントを開きます.これは、ID と open ボタン テキストの 2 つのパラメーターを取ります.

次に、slot キーを持つメイン要素を挿入します.私たちが話したスロットを覚えていますか?この要素は main スロット内にレンダリングされます.

そして、close スロットを反映するボタンを追加します!

それでおしまい!
使いやすい再利用可能なコンポーネントができました.

完全なコードは GitHub にあります.

読んでくれてありがとう、接続しましょう！

私のブログを読んでいただきありがとうございます.メール ニュースレターを購読して、Facebook に接続してください.