انتقال مناسب ابزار با @tailwindui/react – Tailwind CSS

admin5 روز پیش

0 1 خواندن این مطلب 1 دقیقه زمان میبرد

انتقال مناسب ابزار با @tailwindui/react – Tailwind CSS

در ماه فوریه، ما Tailwind UI را منتشر کردیم، فهرستی از اجزای نمونه HTML که برای شما طراحی شده است تا بتوانید آنها را در پروژه‌های Tailwind خود کپی و جایگذاری کنید تا نقطه شروعی برای پروژه‌های خودتان باشد.

ما رابط کاربری Tailwind را به‌عنوان یک محصول فقط HTML و JS ساختیم تا آن را تا حد امکان همه‌کاره کنیم، اما بسیاری از طرح‌ها ذاتاً تعاملی هستند و متأسفانه انتقال آن رفتارهای تعاملی بین چارچوب‌های جاوا اسکریپت همیشه آسان نیست.

یکی از نمونه‌های آن، انتقال‌های ورود/خروج است، مانند زمانی که یک منوی کشویی را تغییر می‌دهید و می‌بینید که ناپدید و ناپدید می‌شود.

Vue.js واقعا تمیز است کامپوننت های داخل/خارج با یک API بسیار آسان برای استفاده:

transition  enter-active-class="transition-opacity duration-75"  enter-from-class="opacity-0"  enter-to-class="opacity-100"  leave-active-class="transition-opacity duration-150"  leave-from-class="opacity-100"  leave-to-class="opacity-0">  div v-show="isShowing">      div>transition>

اما تکرار این مورد در React بسیار دشوارتر است، زیرا تا کنون کتابخانه‌ای طراحی نشده است که از سبک انتقال مبتنی بر ابزار پشتیبانی کند.

بنابراین، اوایل این هفته اولین نسخه @tailwindui/react را منتشر کردیم، کتابخانه‌ای که مقدمات سطح پایین را برای تبدیل HTML سطح بالا به رابط‌های کاربری کاملاً تعاملی فراهم می‌کند.

ما در ماه های آینده اجزای بیشتری را اضافه خواهیم کرد (مانند کرکره ها، جابجایی ها، مدال ها و موارد دیگر، همچنین برای Vue!) اما تصمیم گرفتیم با یک شروع کنیم این کامپوننت حداقل تجربه ی فعلی Tailwind UI را برای کاربران React با آنچه در Vue و Alpine.js امکان پذیر است، به ارمغان می آورد.

در اینجا نحوه استفاده از آن به نظر می رسد:

import { Transition } from "@tailwindui/react";import { useState } from "react";function MyComponent() {  const [isOpen, setIsOpen] = useState(false);  return (    div>      button onClick={() => setIsOpen(!isOpen)}>Togglebutton>      Transition        show={isOpen}        enter="transition-opacity duration-75"        enterFrom="opacity-0"        enterTo="opacity-100"        leave="transition-opacity duration-150"        leaveFrom="opacity-100"        leaveTo="opacity-0"      >        {/* Will fade in and out */}      Transition>    div>  );}