pantoken / components

components ​

بتا

@pantoken/components — یک کتابخانهٔ CSS با ظاهر InstUI، ساخته‌شده از توکن‌های --instui-*.

استایل‌شیت‌های منتشرشده:

  • Base (baseCss) — پیش‌فرض‌های سطح سند قابل انتخاب از توکن‌ها (box-sizing، ریست بدنه، سطح صفحه، رنگ/فونت متن پایه، color-scheme). همچنین حلقهٔ تمرکز (focus-outline) را حمل می‌کند، بنابراین هر عنصر قابل‌فوکوس به‌صورت پیش‌فرض یک حاشیهٔ :focus-visible قابل‌دسترس دریافت می‌کند. زمانی که pantoken مالک صفحه است، آن را بارگذاری کنید.
  • Prose (proseCss) — استایل‌های HTML تولیدشده از مارک‌داون/متن (جداول، سرصفحه‌ها، لینک‌ها، لیست‌ها، کد) که به ریشهٔ محتوا محدود شده‌اند، بنابراین یک صفحهٔ مستندات یا ناحیهٔ محتوا بدون تبدیل DOM به کامپوننت‌ها شبیه InstUI دیده می‌شود. این همان components.css است که رندرهای سایت منتشر می‌کنند.
  • Components (buttonCss, alertCss, badgeCss, گردآوری‌شده توسط componentsCss) — استایل‌های کامپوننت مبتنی بر کلاس که روی نشانه‌گذاری خود اعمال می‌کنید (<button class="instui-button">)، برای ظاهر InstUI در خارج از فریم‌ورک کامپوننت. مقیاس سایهٔ --instui-elevation-* (elevationCss) این شیت را هدایت می‌کند، چون تعداد کافی از کامپوننت‌ها شناورند و سایه‌ها صفتی ذاتی از طراحی‌اند نه افزودنی.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, به‌علاوهٔ مجموعهٔ انتخاب‌شده‌ای از نام‌های معنایی-رنگ/توکن) — یک لایهٔ انتخابی از کلاس‌های بین‌بخش. تولیدکننده‌های عمومی توکن→کلاس (colorUtilitiesCss, tokenUtilitiesCss) در @pantoken/utils قرار دارند؛ این بسته به آن‌ها نام‌های معنایی انتخاب‌شده را می‌دهد، در حالی که @pantoken/plugin-primitives پالِت خام را تغذیه می‌کند.
  • Fonts (انتخابی fonts.css) — قوانین @font-face برای فونت‌های برند Instructure. Base فونت را اعمال می‌کند؛ fonts.css فایل‌های woff2 را بارگذاری می‌کند، بنابراین در صورت نبودن فونت، متن به‌صورت تدریجی افت کیفیت داده و قابل‌خواندن می‌ماند.

همه‌چیز CSS خالص است که از IR توکن مشتق شده، بنابراین از طریق توکن‌ها InstUI را دنبال می‌کند بدون وابستگی به بسته‌های React InstUI. برای کامپوننت‌های واقعی و تعاملی، از @pantoken/react-markdown (محتوا) یا @instructure/ui-* (اپ‌ها) استفاده کنید.

این ماژول یک بشکه است: هر رکورد مستندسازی‌شده در فایل خودش تحت مسیر components//utilities//rules//declarations/ قرار دارد و با API ترکیب lib/ نوشته شده است. رجیستری‌ها (COMPONENTS/UTILITIES/RULES/DECLARATIONS) تجمیع و آزمون برابری را هدایت می‌کنند.

رابط‌ها ​

متغیرها ​

توابع ​