هر بار که یک پروژه جانبی را شروع می کنم ، در جستجوی کدام چارچوب CSS که استفاده خواهم کرد ، جستجو می کنم.
اما bootstrap ، tailwind ، بنیاد و غیره چیز من نیست ، بنابراین من با استفاده از papercss به پایان رسیدم.
PaperCSS سبک های خوبی را برای بسیاری از عناصر فراهم می کند: فرم ها ، کارت ها ، ناوها ، دکمه ها و غیره.
اما استفاده از a checkbox باز کردن یک گفتگو کمی مدرسه قدیمی است ^^:
به همین دلیل پروژه Papierjs متولد شد.
پایا (پاپیر به معنای کاغذ به زبان فرانسه است) یک کتابخانه مؤلفه وب است که با استنسیل و کتاب داستان ساخته شده است.
هدف این است که به راحتی PaperCSS را با اجزای وب ارائه دهید:
title="Assassin's Creed Unity">
title="Assassin's Creed Mirage" selected>
title="Assassin's Creed II">
Papierjs همچنین اجزای جدیدی مانند کشویی ، آکاردئون ، اعلان و غیره را ارائه می دهد ، که هنوز هم از سبک های PaperCSS استفاده می کنند.
چارچوب
استنسیل
من از استنسیل برای ایجاد مؤلفه هایی استفاده می کنم shadowRootبشر این امکان را به من می دهد تا بدون استفاده از سبک های جهانی در وب سایت از PaperCSS استفاده کنم.
من واقعاً استنسیل را دوست دارم. برای ایجاد مؤلفه ها و مدیریت وضعیت ، غرفه ها ، رویدادها و غیره بسیار مفید است.
کتاب داستان
برای ارائه مشخصات مؤلفه ، زمین بازی و نمای کلی ، کتاب داستان بسیار جذاب است!
این یک عمل خوب برای من است که این را برای مؤلفه ها تهیه کنم.
مشخصات
برای مشخصات ، من استفاده می کنم mdx، که شامل می شود readme.md پرونده های تولید شده توسط استنسیل. نمونه هایی با مؤلفه P-Modal. به این ترتیب ، ما می توانیم در مورد وقایع ، روش ها ، غرفه ها و غیره بخوانیم.
نمای کلی
بخش نمای کلی یک نسخه ی نمایشی را ارائه می دهد و نشان می دهد html کد برای استفاده از آن. مثال با مؤلفه P-Acordion.
برای برخی از داستان ها ، من ایجاد کردم پیش نمایش اجزای استنسیل. من یک نسخه ی نمایشی ارائه می دهم و tsx کد مثال دیگر با مؤلفه P-Modal.
زمین بازی
زمین بازی شبیه به نمای کلی است ، اما با StoryBook's args ویژگی ها ، شما می توانید موارد استفاده از prop را آزمایش کنید. نمونه هایی با مؤلفه P-Button.
طرف دیگر
در حال حاضر ، هنوز چند مؤلفه PaperCSS وجود دارد ، مانند کارت و NAVBAR.
من همچنین مؤلفه های جدیدی مانند AutoClottlete ، Spinner ، Password Fields و غیره را درج خواهم کرد.
می توانید تمام مؤلفه های موجود را در اینجا مشاهده کنید: Papierjs و Code on GitHub.
