webcoreui
1.0.0
مهم
هذه المكتبة لا تزال في التطوير المبكر. يمكن أن تؤدي التغييرات الجديدة إلى كسر الوظائف الحالية ، ولا ينبغي اعتبار أي وظيفة نهائية في هذه المرحلة. ستعتبر المكتبة مستقرة بمجرد وصولها إلى V1.0.
الوثائق الكاملة المتاحة على webcoreui.dev.
يمكن استخدام WebCore كمشروع مستقل ، أو يمكن دمجه في النظم الإيكولوجية Astro أو Svelte أو React الحالية. أسهل طريقة للبدء هي استنساخ المستودع وتشغيل npm run dev للبدء في بناء صفحاتك مع المكونات المتاحة.
ملحوظة
قبل البدء ، تأكد من تثبيت مدير حزمة ، مثل العقدة.
تستخدم مكونات Webcore Sass للتصميم. لاستخدام مكتبة المكون ، يجب أن يكون لديك الحزم التالية مثبتة:
v1.82v5.7بناءً على إعداد مشروعك ، ستحتاج أيضًا إلى الحزم التالية:
v5.0v5.12v18.3v18.3قم بتثبيت Webcore كاعتماد عن طريق تشغيل أحد الأوامر التالية:
# Using NPM
npm i webcoreui
# Using Yarn
yarn add webcoreui قم بإنشاء ملف webcore.config.scss فارغ في جذر مشروعك لإعداد تكوينات CSS. قم بإعداد الأنماط والخطوط الافتراضية عن طريق الاتصال بما يلي في ملف SCSS العالمي:
@use ' webcoreui/styles ' as * ;
@include setup ((
// Define paths for your fonts
fontRegular: ' /fonts/Inter-Regular.woff2 ' ,
fontBold: ' /fonts/Inter-Bold.woff2 '
));نصيحة
يمكنك تنزيل استخدام Fonts Webcore من دليل public/fonts .
يمكن لـ Mixin Setup أيضًا قبول الخيارات التالية:
| ملكية | القيمة الافتراضية | غاية |
|---|---|---|
includeResets | true | تشمل أنماط إعادة تعيين. قم بالتعيين على false إذا كنت ترغب في استخدام إعادة تعيين CSS الخاصة بك. |
includeUtilities | true | يضيف فصول الأداة المساعدة ل CSS. اقرأ المزيد عن فئات الأداة المساعدة المتاحة هنا. |
includeTooltip | true | يضيف أنماط لاستخدام تلميحات الأدوات. |
includeScrollbarStyles | true | يضيف أنماط لأرسام التمرير. |
يمكن تغيير أنماط المكونات الافتراضية عن طريق تجاوز متغيرات CSS التالية:
html body {
// Avatar component
--w-avatar-border : var ( --w-color-primary-70 );
// Banner component
--w-banner-top : 0 ;
// BottomNavigation component
--w-bottom-navigation-max-width : auto ;
// Checkbox component
--w-checkbox-color : var ( --w-color-primary );
// Collapsible component
--w-collapsible-initial-height : 0 ;
--w-collapsible-max-height : 100 % ;
// Masonry component
--w-masonry-gap : 5 px ;
// Progress component
--w-progress-color : var ( --w-color-primary );
--w-progress-background : var ( --w-color-primary-50 );
--w-progress-stripe-light : var ( --w-color-primary );
--w-progress-stripe-dark : var ( --w-color-primary-10 );
// Radio component
--w-radio-color : var ( --w-color-primary );
// Rating component
--w-rating-color : var ( --w-color-primary );
--w-rating-empty-color : var ( --w-color-primary );
--w-rating-empty-background : var ( --w-color-primary-70 );
--w-rating-size : 18 px ;
// Ribbon component
--w-ribbon-offset : 20 px ;
--w-ribbon-folded-offset : 10 px ;
// Scrollbars
--w-scrollbar-bg : var ( --w-color-primary-60 );
--w-scrollbar-fg : var ( --w-color-primary-50 );
// Skeleton component
--w-skeleton-color : var ( --w-color-primary-60 );
--w-skeleton-wave-color : var ( --w-color-primary-50 );
// Slider component
--w-slider-background : var ( --w-color-primary-50 );
--w-slider-color : var ( --w-color-primary );
--w-slider-thumb : var ( --w-color-primary-50 );
// Spinner component
--w-spinner-color : var ( --w-color-primary );
--w-spinner-width : 2 px ;
--w-spinner-speed : 2 s ;
--w-spinner-size : 30 px ;
--w-spinner-dash : 8 ;
// Spoiler component
--w-spoiler-color : var ( --w-color-primary );
// Stepper component
--w-stepper-color-border : var ( --w-color-primary-50 );
--w-stepper-color-active : var ( --w-color-info );
--w-stepper-color-complete : var ( --w-color-success );
// Switch component
--w-switch-off-color : var ( --w-color-primary-50 );
--w-switch-on-color : var ( --w-color-primary );
// ThemeSwitcher component
--w-theme-switcher-size : 20 px ;
// Timeline component
--w-timeline-color : var ( --w-color-primary-50 );
--w-timeline-text-color : var ( --w-color-primary );
--w-timeline-counter : decimal ;
// Tooltips
--w-tooltip-background : var ( --w-color-primary );
--w-tooltip-color : var ( --w-color-primary-70 );
// Override border-radius
--w-sm-radius : 2 px ;
--w-md-radius : 5 px ;
--w-lg-radius : 10 px ;
--w-xl-radius : 15 px ;
}ابدأ في استخدام مكونات WebCore في الكود الخاص بك عن طريق استيرادها:
---
// Import the component relevant to your project
// How to import Astro components
import { Accordion } from ' webcoreui/astro '
// How to import Svelte components
import { Accordion } from ' webcoreui/svelte '
// How to import React components
import { Accordion } from ' webcoreui/react '
---
< Accordion items = { [{ ... }] } />
