2024年6月21日

Headless UI v2.1: トランジションAPIの簡素化とマルチダイアログサポートの改善

Adam Wathan

@adamwathan

Jonathan Reinink

@reinink

React向けHeadless UI v2.1をリリースしました。今回のリリースでは、トランジションAPIを大幅に簡素化し、複数のダイアログを兄弟要素としてレンダリングするサポートを追加しました。

トランジションAPIの簡素化

v2.1では、トランジションをより簡単にするために、トランジションさせたい組み込みコンポーネントすべてに新しいtransitionプロパティを追加し、各トランジションステージのデータ属性を追加しました。これにより、ターゲット要素にクラスを追加するだけでトランジションスタイルを追加できます。

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems
        transition
        className={`
          transition ease-out
          data-[closed]:scale-95 data-[closed]:opacity-0
          data-[enter]:duration-200 data-[leave]:duration-300
        `}
      >
        {/* Menu items… */}
      </MenuItems>
    </Menu>
  );
}

トランジションのさまざまなステージをターゲットにするために使用できる4つのデータ属性があります。

data-closed: 要素が開始時および終了時にトランジションするスタイル。
data-enter: 要素が開始中に適用するスタイル（durationやeasing curveなど）。
data-leave: 要素が終了中に適用するスタイル（durationやeasing curveなど）。
data-transition: 要素が開始または終了中に適用するスタイル。両方のステージ間で値を共有する場合に便利です。

これらの属性を重ねて、開始と終了で異なるclosedスタイルを使用することもできます。たとえば、このダイアログは左からスライドインしますが、右にスライドアウトします。

import { Dialog } from "@headlessui/react";
import { useState } from "react";
function Example() {
  let [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open dialog</button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        transition
        className={`
          transition duration-300 ease-out
          data-[closed]:opacity-0
          data-[closed]:data-[enter]:-translate-x-8
          data-[closed]:data-[leave]:translate-x-8
        `}
      >
        {/* Dialog content… */}
      </Dialog>
    </>
  );
}

通常のHTML要素やその他のコンポーネントをトランジションする場合でも、新しいデータ属性APIを使用して<Transition>コンポーネントを使用できます。

import { Transition } from "@headlessui/react";
import { useState } from "react";
function Example() {
  const [isShowing, setIsShowing] = useState(false);
  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>Toggle</button>
      <Transition show={isShowing}>
        <div className="transition duration-300 data-[closed]:opacity-0">I will fade in and out</div>
      </Transition>
    </>
  );
}

Tailwind UIはすでにすべてこの新しいトランジションAPIを使用するように更新されており、コードは大幅にシンプルかつ軽量になっています。例については、モーダルダイアログ、ドロップダウン、スライドオーバー、フライアウトメニュー、またはセレクトメニューコンポーネントをご覧ください。

既存のAPIはすべて下位互換性のために引き続き機能しますが、この新しいアプローチが今後の推奨アプローチとなります。

詳細については、更新されたTransitionコンポーネントのドキュメントをご覧ください。

複数のダイアログを兄弟要素としてレンダリング

Headless UI v2.1では、複数のダイアログを互いにネストせずに、同時にレンダリングできるようになりました。

これは、アプリケーションの無関係な2つの部分が同時にダイアログを表示する必要がある場合に非常に役立ちます。たとえば、すでに何らかの確認ダイアログが開いている状態で、アプリケーションの別の部分がネットワーク接続が失われたり、セッションがタイムアウトしたことを検出し、新しいダイアログを最前面に表示する必要がある場合などです。

最近取り組んでいるアプリケーションUIキットであるCatalystでは、このようになります。

各ダイアログが開かれた順序を追跡し、最後に開かれたダイアログが、Escapeキーを押すかダイアログの外側をクリックしたときに閉じるダイアログになります。

今日からこれらを使用するには、Headless UIの最新バージョンをインストールしてください。

npm i @headlessui/react@latest

何か問題が発生した場合は、GitHubでお知らせください。

Headless UI v2.1: トランジションAPIの簡素化とマルチダイアログサポートの改善

トランジションAPIの簡素化

複数のダイアログを兄弟要素としてレンダリング

すべての最新情報を直接受信箱に届けます。ニュースレターに登録してください。

すべての最新情報を直接受信箱に届けます。
ニュースレターに登録してください。