روش‌های طراحی، مؤلفه‌ها و ابزارها
با Ran Design، ranui و ranuts محصول بسازید. هر بخش به‌صورت مستقل با راهنمای توسعه‌دهندگان و عامل‌ها قابل استفاده است.
نمونه
دعوت از هم‌تیمی
کامپوننت‌های واقعی ranui. ایمیل را خالی بگذارید یا خطا را شبیه‌سازی کنید تا هر حالت را ببینید.
- کامپوننت
- 41
- ابزار
- 90+
- زبان
- 8
- مجوز
- MIT
حالت‌های واقعی ساخته‌شده با ranui
quarterly-report.pdf64%
خواندن ۴ فایل اجرای تست‌ها باز کردن pull request
<r-glass>از کجا شروع کنید
ranui
کتابخانهٔ Web Components مستقل از فریم‌ورک. ۴۱ عنصر r- آمادهٔ استفاده را در Vue، React یا HTML ساده بگذارید.
مرور کامپوننت‌هاranuts
بیش از ۹۰ ابزار تایپ‌شده برای رشته، شیء، رنگ، زمان، فایل و DOM. سازگار با tree-shaking و بدون وابستگی.
خواندن مستنداتRan Design
روش‌های چیدمان، تعامل، حرکت و ارزیابی با شواهد، مستقل از کتابخانهٔ مؤلفه‌ها.
کاوش طراحیآنچه بیشتر کتابخانه‌ها کنار می‌گذارند
ranuiکامپوننت‌ها
- پخش‌کننده
<r-player>پخش‌کنندهٔ ویدئوی HLS با نرخ بیت وفقی و هستهٔ کنترلی ماژولار. - انتخابگر رنگ
<r-colorpicker>انتخابگر کامل HSV با لغزندهٔ فام و شفافیت، و خروجی زندهٔ HEX / RGBA. - نمودار راداری
<r-radar>نمودار راداری ترسیم‌شده روی canvas، با برچسب و سبک برچسب برای هر محور. - فرمول ریاضی
<r-math>با Temml که تنبل بارگذاری می‌شود، LaTeX را تنها با یک ویژگی به MathML بومی تبدیل می‌کند. - کارت اسکراچ
<r-scratch>تعامل خراشیدن و آشکار شدن روی canvas، با آستانهٔ تکمیل.
ranutsابزارها
- Bridge
PostMessageBridgeفراخوانی از راه دور مبتنی بر Promise روی postMessage، میان iframe و Worker و تب‌ها، با انتقال structured clone و کانال‌های جدا. - Visual
Applicationگراف صحنه به سبک PixiJS، با موتور رندر قابل تعویض: WebGPU، WebGL یا Canvas. - DOM مجازی
h() · init()DOM مجازی به سبک snabbdom: هایپراسکریپت، patch، ماژول‌های قابل تعویض و قلاب‌های چرخهٔ عمر. - TOTP
TOTPرمزهای یک‌بارمصرف بر پایهٔ RFC-6238، از SHA-1 تا SHA3-512، بدون هیچ وابستگی رمزنگاری. - فهرست MIME
getMime()جست‌وجوی دوسویهٔ MIME ⇄ پسوند فایل با حدود ۱۰۰۰ مدخل.
نصب و استفاده
هر دو بسته را نصب کنید، عناصر را یک بار ثبت کنید و هرجا خواستید به کار ببرید. نه مرحلهٔ ساخت لازم است نه فریم‌ورک.
npm i ranui ranutsنصب و ثبت
$ npm i ranui ranuts // register the <r-*> elements once import 'ranui' import { debounce } from 'ranuts'
استفاده در هر جا
<!-- Vue, React, or plain HTML --> <r-button type="primary">Save</r-button> <r-progress percent="66"></r-progress>