Radix UI

npm install radix-ui

import { Dialog } from "radix-ui";
import "./dialog.css";

export function ProfileDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="button">编辑资料</Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content className="dialog-content">
          <Dialog.Title className="dialog-title">
            编辑资料
          </Dialog.Title>
          <Dialog.Description className="dialog-description">
            修改姓名并保存。完成后焦点会回到打开按钮。
          </Dialog.Description>

          <label className="field">
            <span>姓名</span>
            <input name="name" autoComplete="name" />
          </label>

          <div className="actions">
            <Dialog.Close className="button secondary">
              取消
            </Dialog.Close>
            <button className="button" type="submit">
              保存
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  animation: fade-in 160ms ease-out;
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: 1rem;
  background: white;
  padding: 1.5rem;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.25);
}

.dialog-content[data-state="closed"] {
  animation: fade-out 120ms ease-in;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

import { useState } from "react";
import { Dialog } from "radix-ui";

export function ControlledDialog() {
  const [open, setOpen] = useState(false);

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    await saveProfile();
    setOpen(false);
  }

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>编辑</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>编辑资料</Dialog.Title>
          <form onSubmit={handleSubmit}>
            <button type="submit">保存</button>
          </form>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

import { forwardRef } from "react";
import { Dialog } from "radix-ui";

const PrimaryButton = forwardRef<
  HTMLButtonElement,
  React.ComponentPropsWithoutRef<"button">
>((props, ref) => (
  <button {...props} ref={ref} className="primary-button" />
));

PrimaryButton.displayName = "PrimaryButton";

export function Trigger() {
  return (
    <Dialog.Trigger asChild>
      <PrimaryButton>打开设置</PrimaryButton>
    </Dialog.Trigger>
  );
}

import { Dialog } from "radix-ui/dialog";
import { Tooltip } from "radix-ui/tooltip";

// 统一包支持子路径导入，便于明确模块边界。
export { Dialog, Tooltip };

npm run dev

# 发布前运行项目自己的类型、测试和构建脚本
npm run typecheck
npm test
npm run build