自发布开发预览版以来,我们刚刚发布了 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 menu */}</Sidebar>}      navbar={<Navbar>{/* Navbar for mobile screens */}</Navbar>}    >      {/* Your page content */}    </SidebarLayout>  );}

第二个是更简单的堆叠布局,带有水平导航菜单,这通常非常适合页面较少的应用程序:

import { StackedLayout } from "@/components/stacked-layout";import { Navbar } from "@/components/navbar";import { Sidebar } from "@/components/sidebar";function Example({ children }) {  return (    <StackedLayout      navbar={<Navbar>{/* Top navigation menu */}</Navbar>}      sidebar={<Sidebar>{/* Sidebar content for mobile menu */}</Sidebar>}    >      {/* Your page content */}    </StackedLayout>  );}

它们当然也支持暗模式:

我们非常努力地使所有这些组件的 API 变得正确,使其易于将内容放置在需要的位置,可选地包括图标,集成下拉菜单等。

最终结果感觉非常简单,这正是我们所追求的,我认为你会发现它们确实是构建的乐趣。

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

描述列表

当我们在开发应用程序布局时,我们意识到没有任何很好的内容来演示它们,所以我们制作了一个 DescriptionList 组件来填补这个大空白。

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/description-list";function Example() {  return (    <DescriptionList>      <DescriptionTerm>Customer</DescriptionTerm>      <DescriptionDetails>Michael Foster</DescriptionDetails>      <DescriptionTerm>Event</DescriptionTerm>      <DescriptionDetails>Bear Hug: Live in Concert</DescriptionDetails>      {/* ... */}    </DescriptionList>  );}

它是一个非常简单的 API,工作方式就像 HTML <dl> 元素,但样式优美,响应迅速,当然也支持暗模式。

查看描述列表文档以获取更多详细信息。

页面标题

更多我们需要使演示看起来不错的组件!我们添加了 Heading 和 Subheading 组件,你可以用它们快速一致地为 UI 中的内容命名。

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

你可以使用 level 属性控制渲染的 HTML 标题元素,像其他所有内容一样,它们是响应式的,并且内置了暗模式支持。

查看标题文档以获取更多示例。

分隔线

把最好的留到最后 — Catalyst 现在包括了一条灰色的线,你可以将它放在内容之间。

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

我们为此付出了不懈的努力,并且非常自豪能使你的应用程序开发过程变得更容易。

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

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

期待看到你用它做什么!