自发布开发预览以来，我们刚刚发布了 Catalyst 的第一个重大更新，新增了两个应用布局、导航栏和侧边栏组件、描述列表等。

我们还很高兴地分享，随着 Headless UI v2.0 for React 的发布，Catalyst 不再处于开发预览状态 — 它已正式稳定，您现在可以在生产中使用它，而不必担心底层依赖项的破坏性更改。

查看我们全新 在线演示网站，亲自体验这些更新后的完整 Catalyst 项目是什么样的。

新的应用布局组件

开始新项目时，最难的一件事就是克服空白画布，以便您可以开始构建一些东西。

在本次更新中，我们添加了两个新的应用布局组件，使您的项目易于塑形和结构化，从而让您能开始构建。

第一个布局是经典的 侧边栏布局，在小屏幕上将侧边栏移入可折叠菜单中：

import { SidebarLayout } from "@/components/sidebar-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <SidebarLayout
      sidebar={<Sidebar>{/* 侧边栏菜单 */}</Sidebar>}
      navbar={<Navbar>{/* 移动屏幕的导航栏 */}</Navbar>}
    >
      {/* 您的页面内容 */}
    </SidebarLayout>
  );
}

第二个是更简单的 堆叠布局，带有水平导航菜单，非常适合仅有少量页面的应用：

import { StackedLayout } from "@/components/stacked-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <StackedLayout
      navbar={<Navbar>{/* 顶部导航菜单 */}</Navbar>}
      sidebar={<Sidebar>{/* 移动菜单的侧边栏内容 */}</Sidebar>}
    >
      {/* 您的页面内容 */}
    </StackedLayout>
  );
}

当然，它们都支持深色模式：

我们非常努力地为所有这些组件制作了正确的 API，使您能够轻松地将元素放置到所需的位置，选择性地包含图标、纳入下拉菜单等。

最终结果感觉真的很简单，这正是我们所追求的，我相信您会发现它们在构建时真是令人愉悦。

查看 侧边栏布局文档 和 堆叠布局文档 开始使用，然后深入了解 导航栏 和 侧边栏 组件，了解如何构建所有的导航项目。

描述列表

在我们开发应用布局时，意识到没有合适的内容来演示它们，因此我们制作了一个 DescriptionList 组件来填补这个空白。

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/description-list";
function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>客户</DescriptionTerm>
      <DescriptionDetails>迈克尔·福斯特</DescriptionDetails>
      <DescriptionTerm>事件</DescriptionTerm>
      <DescriptionDetails>熊抱：现场音乐会</DescriptionDetails>
      {/* ... */}
    </DescriptionList>
  );
}

这是一种非常简单的 API，工作方式与 HTML <dl> 元素非常相似，但样式优雅、响应式，并且当然支持深色模式。

有关更多细节，请查看 描述列表 文档。

页面标题

我们需要更多组件来使演示看起来更好！我们添加了 Heading 和 Subheading 组件，您可以使用它们快速且一致地为 UI 添加标题。

import { Heading, Subheading } from "@/components/heading";
function Example() {
  return (
    <div>
      <Heading>标题</Heading>
      <Subheading>子标题</Subheading>
    </div>
  );
}

您可以使用 level 属性控制渲染哪个 HTML 标题元素，并且像其他一切一样，它们支持响应式和内置深色模式。

有关更多示例，请参见 标题 文档。

分隔线

最后保留了最好的一件事 — Catalyst 现在包括一条灰色线，您可以将其放置在物品之间。

import { Divider } from "@/components/divider";
function Example() {
  return <Divider />;
}

我们对此进行了不懈努力，并非常自豪地使其成为您应用程序开发过程的一部分。

查看 分隔线 文档 — 它至少有一个属性。

Catalyst 包含在您的 Tailwind UI 全访问许可中，无需额外费用，因此如果您拥有许可证，请登录并 下载最新版本 开始构建。

期待看到您用它做的事情！