Headless UI v1.0

昨秋、Tailwind CSS と完璧に連携するように設計された、完全にスタイルなしで、完全にアクセシブルな UI コンポーネントのライブラリである Headless UI を発表しました。

本日、React と Vue の両方で含まれるコンポーネントの数が 2 倍以上になった Headless UI v1.0 をリリースできることを非常に嬉しく思います。

新機能

React ライブラリに 4 つの新しいコンポーネント、Vue に 5 つの新しいコンポーネントを追加しました。

Headless UI には、従来のモーダルダイアログ、モバイルのスライドアウトメニュー、またはページ全体のフォーカスをキャプチャする必要があるその他のテイクオーバースタイルの UI を構築するために使用できる、堅牢なダイアログ実装が含まれています。

import { useState } from "react";
import { Dialog } from "@headlessui/react";
function MyDialog() {
  let [isOpen, setIsOpen] = useState(true);
  return (
    <Dialog open={isOpen} onClose={setIsOpen}>
      <Dialog.Overlay />
      <Dialog.Title>Deactivate account</Dialog.Title>
      <Dialog.Description>This will permanently deactivate your account</Dialog.Description>
      <p>
        Are you sure you want to deactivate your account? All of your data will be permanently removed. This action
        cannot be undone.
      </p>
      <button onClick={() => setIsOpen(false)}>Deactivate</button>
      <button onClick={() => setIsOpen(false)}>Cancel</button>
    </Dialog>
  );
}

Disclosure

インラインコンテンツをアクセシブルに表示/非表示にするのが簡単な新しい Disclosure コンポーネントを追加しました。これは、折りたたみ可能な FAQ の質問、「もっと見る」インターフェイス、またはページコンテンツの残りの部分を押し出すハンバーガーメニューなどに役立ちます。

<template>
  <Disclosure>
    <DisclosureButton> Is team pricing available? </DisclosureButton>
    <DisclosurePanel> Yes! You can purchase a license that you can share with your entire team. </DisclosurePanel>
  </Disclosure>
</template>
<script>
  import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
  export default {
    components: { Disclosure, DisclosureButton, DisclosurePanel },
  };
</script>

Radio Group

シンプルな小さなラジオサークルの代わりに、派手なカードなどを使用したい場合のように、完全にカスタムのラジオボタン UI を構築するために使用できる RadioGroup コンポーネントが追加されました。

import { useState } from "react";
import { RadioGroup } from "@headlessui/react";
function MyRadioGroup() {
  let [plan, setPlan] = useState("startup");
  return (
    <RadioGroup value={plan} onChange={setPlan}>
      <RadioGroup.Label>Plan</RadioGroup.Label>
      <RadioGroup.Option value="startup">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Startup</span>}
      </RadioGroup.Option>
      <RadioGroup.Option value="business">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Business</span>}
      </RadioGroup.Option>
      <RadioGroup.Option value="enterprise">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Enterprise</span>}
      </RadioGroup.Option>
    </RadioGroup>
  );
}

新しい Popover コンポーネントを使用すると、通常の Menu コンポーネントのようなコンテンツ制限のないカスタムドロップダウン UI を構築できます。マーケティングサイトのフライアウトメニュー、フォームフィールドを含むドロップダウンなどに最適です。

<template>
  <Popover class="relative">
    <PopoverButton>Solutions</PopoverButton>
    <PopoverPanel class="absolute z-10">
      <div>
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </div>
      <img src="/solutions.jpg" alt="" />
    </PopoverPanel>
  </Popover>
</template>
<script>
  import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
  export default {
    components: { Popover, PopoverButton, PopoverPanel },
  };
</script>

TransitionRoot および TransitionChild (Vue 用)

Headless UI には React 用の Transition コンポーネントが既にありましたが、Vue ユーザーには Vue に付属しているネイティブの <transition> を常に推奨してきました。ただし、ネイティブトランジションにはいくつかの制限があり、並行して実行されるはずのネストされたトランジションを調整しようとすると複雑になる可能性があります。

Headless UI v1.0 では、React の Transition コンポーネントが Vue にも導入され、モーダルダイアログなどのトランジションが大幅に容易になります。

<template>
  <!-- This `show` prop controls all nested `Transition.Child` components. -->
  <TransitionRoot :show="isOpen">
    <!-- Background overlay -->
    <TransitionChild
      enter="transition-opacity"
      ease-linear
      duration-300"
      enter-from="opacity-0"
      enter-to="opacity-100"
      leave="transition-opacity"
      ease-linear
      duration-300"
      leave-from="opacity-100"
      leave-to="opacity-0"
    >
      <!-- … -->
    </TransitionChild>
    <!-- Sliding sidebar -->
    <TransitionChild
      enter="transition"
      ease-in-out
      duration-300
      transform"
      enter-from="-translate-x-full"
      enter-to="translate-x-0"
      leave="transition"
      ease-in-out
      duration-300
      transform"
      leave-from="translate-x-0"
      leave-to="-translate-x-full"
    >
      <!-- … -->
    </TransitionChild>
  </TransitionRoot>
</template>
<script>
import { ref } from "vue";
import { Transition, TransitionChild } from "@headlessui/vue";
export default {
  components: { TransitionRoot: Transition, TransitionChild },
  setup() {
    const isShowing = ref(true);
    return {
      isShowing,
    };
  },
};
</script>

試してみてください

真新しいドキュメント Web サイトにアクセスして、Headless UI をプロジェクトに取り込んで試してみてください。MIT ライセンスのオープンソースなので、コードを詳しく調べたり、問題を報告する必要がある場合は、GitHub リポジトリにアクセスしてください。

試してみませんか？ Headless UI ウェブサイトにアクセス →

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

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