The Wheels

Modal

showModal · × / backdrop / data-tw-modal-close · 長文スクロール

Preview

基本

メンバーを招待

メンバーを招待

招待メールを送信します。相手が承諾するとプロジェクトに参加できます。

× ボタン、backdrop、フッターの閉じる、Escape で閉じられます。初回表示後にサイズが固定され、以降の内容増減は content 内スクロールで吸収します。

招待できるロールは「閲覧」「編集」「管理者」です。管理者以外は請求情報を変更できません。招待リンクの有効期限は 7 日です。期限切れの場合は再送してください。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

キャンセル 招待を送る

HTML

<tw-button type="button" id="…">メンバーを招待</tw-button>

<tw-modal id="…">
  <h2 slot="header">メンバーを招待</h2>
  <div slot="content">
    <p>招待メールを送信します。相手が承諾するとプロジェクトに参加できます。</p>
  </div>
  <div slot="footer">
    <tw-button type="button" variant="ghost" data-tw-modal-close>キャンセル</tw-button>
    <tw-button type="button" data-tw-modal-close>招待を送る</tw-button>
  </div>
</tw-modal>
import "@b4moss/the-wheels";

const modal = document.getElementById("demo-modal");
document.getElementById("open-modal")?.addEventListener("click", () => {
  modal?.showModal();
});
import "@b4moss/the-wheels";
import type { TwModal } from "@b4moss/the-wheels";

const modal = document.getElementById("demo-modal") as TwModal | null;
document.getElementById("open-modal")?.addEventListener("click", () => {
  modal?.showModal();
});