کاتالیزور: طرح‌بندی برنامه‌ها، منوهای پیمایش، فهرست‌های توضیحات و موارد دیگر

ما به تازگی اولین به‌روزرسانی اصلی Catalyst را از زمان انتشار پیش‌نمایش توسعه منتشر کرده‌ایم، با دو طرح‌بندی جدید برنامه، اجزای ناوبری و نوار کناری، لیست‌های توضیحات و موارد دیگر.

ما همچنین می خواهیم به اشتراک بگذاریم که با انتشار Headless UI v2.0 برای 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>CustomerDescriptionTerm>      DescriptionDetails>Michael FosterDescriptionDetails>      DescriptionTerm>EventDescriptionTerm>      DescriptionDetails>Bear Hug: Live in ConcertDescriptionDetails>      {/* ... */}    DescriptionList>  );}

این یک API واقعا ساده است که درست مانند HTML کار می کند

عنصر، اما به خوبی طراحی شده، پاسخگو و البته با پشتیبانی از حالت تاریک است.

برای جزئیات بیشتر به مستندات لیست توضیحات مراجعه کنید.

---

ما به اجزای بیشتری نیاز داشتیم تا نسخه نمایشی خوب به نظر برسد! اضافه کردیم Heading و Subheading مولفه هایی که می توانید از آنها برای عنوان گذاری سریع و پیوسته چیزها در رابط کاربری خود استفاده کنید.

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

شما می توانید کنترل کنید که کدام عنصر هدر HTML با استفاده از level prop، و مانند هر چیز دیگری، آنها با پشتیبانی از حالت تاریک داخلی پاسخگو هستند.

برای نمونه های بیشتر به مستندات سرصفحه مراجعه کنید.

---

من بهترین ها را برای آخر ذخیره کرده ام – Catalyst اکنون یک خط خاکستری دارد که می توانید آن را بین چیزها قرار دهید.

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

ما بی‌وقفه روی این کار کار کرده‌ایم و بسیار مفتخریم که این بخش از فرآیند توسعه برنامه شما را آسان‌تر می‌کنیم.

مستندات Divider را بررسی کنید – حداقل یک پشتیبانی دارد.

---

Catalyst همراه با مجوز شما برای دسترسی کامل به Tailwind UI بدون هزینه اضافی است، بنابراین اگر مجوز دارید، وارد شوید و آخرین نسخه را دانلود کنید تا شروع به ساخت کنید.

ما مشتاقانه منتظریم ببینیم با آن چه می کنید!