wpds ui kit
v2.10.1
يعد نظام UI System (WPDS) لتصميم Washington Post (WPDS) مجموعة أحادية من مجموعة واجهة المستخدم الخاصة بنا وموقع الوثائق لدينا.
مثال على الرسم البياني التبعية لاستيراد الزر من مجموعة.
مخطط انسيابي LR
A ["@Washingtonpost/WPDS-theme"]-> B ["@WashingtonPost/WPDS-UI-KIT"]
C ["@Washingtonpost/WPDS-Button"]-> B ["@WashingtonPost/WPDS-UI-KIT"]
A ["@Washingtonpost/WPDS-theme"]-> c
انقر فوق "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme"
انقر فوق b "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
انقر فوق c "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"
هذا هيكل المشروع مستوحى بشدة من شقرا واجهة المستخدم و Radix UI وغيرها.
استيراد واحد للمستخدمين ، العديد من الحزم التي تم استيرادها في @washingtonpost/wpds-ui-kit .
npm i @washingtonpost/wpds-ui-kitButton density: "compact" . بعد الترقية ، سيكون الافتراضي density: "default" ، لذلك ستحتاج إلى التحقق من أي أزرار تستخدم في الكود الخاص بك للتراجع وتطبيق density: "compact" حسب الحاجة. < Button
density = "compact"
. . .globalStyles على انتقال مطبق عالميًا إلى جميع خصائص CSS على جميع العناصر. بعد ترقية أي عنصر مكون يعتمد على هذا الانتقال ، سيحتاج إلى تطبيق واحد محليًا باستخدام متغيرات موضوع WPDS. transition : theme . transitions . allFast ,
// or
transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `globalStyles على إزالة عالمية للهامش والحشو لجميع العناصر. بعد ترقية أي عنصر مكون يعتمد على إزالة التباعد سيحتاج إلى إضافة قواعد تباعد مع أنماط محلية إلى المكون. تم تطوير هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
