الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

مهم

هذا الإصدار الحالي من فيتامين لن يتطور بعد الآن ولا يقبل سوى إصلاحات الأخطاء من الآن فصاعدًا. مزيد من التفاصيل هنا.


شعار نظام تصميم فيتامين العشاريشعار نظام تصميم فيتامين العشاري

فيتامين ويب

مكتبات نظام التصميم العشرية لتطبيقات الويب

الموقع - يعرض

مقدمة

نظام تصميم Decathlon هو الإطار الذي يساعد نظامنا الإيكولوجي على تصميم وتطوير التجارب المتسقة والجودة. بالنسبة لقسمه الرقمي ، يطلق عليه فيتامين.

يستضيف هذا المستودع مكتبات لتطبيقات الويب.

الحزم الأساسية

من أجل السماح لك باستهلاك عناصر نظام التصميم وفقًا لقيود المنتج الخاصة بك ، فإننا نقدم لك إمكانية استخدام مكتبات ويب فيتامين مع تقنيات ومستويات مختلفة من التفاصيل مع الحزم الأساسية التي تم تطويرها وصيانتها بواسطة فريق فيتامين كور.

أنماط CSS العالمية؟

توفر لك هذه الحزمة مجموعة كاملة من CSS مع مجموعة ضخمة من فئات الأداة المساعدة حيث يتم إنشاؤها باستخدام CSS Tailwind. بعد ذلك ، سيكون الأمر متروكًا لك لتحسين الإنتاج عن طريق تطهير CSS وفقًا للفئات المستخدمة في HTML:

@VTMN/CSS ReadMe

إذا كنت تستخدم بالفعل CSS Tailwind في مشروعك أو كنت ترغب في الاستفادة الكاملة من جميع ميزاتها مثل الوظائف والتوجيهات عن طريق إنشاء فصولك الخاصة عبر @apply على سبيل المثال. يمكنك التحقق من حزمة @vtmn/css-tailwind-preset والتي ستشرح لك كيفية استخدام أنماط فيتامين في مشروع CSS Tailwind.

أنماط CSS محددة؟

تسمح هذه الحزم باستهلاك العناصر ذات مستوى أعلى من التفاصيل. يمكنك الحصول على الأنماط التي تحتاجها فقط وما تستهلكه هو CSS النقي بدون خصائص مخصصة CSS ، لذلك IE 11 متوافقة:

لتصميم الرموز
@VTMN/CSS-Design-Tokens ReadMe
لكل مكون

الإجراءات

@VTMN/CSS-BUTTER ReadMe
@vtmn/css-dropdown ReadMe
@VTMN/CSS-Link ReadMe

الأشكال

@VTMN/CSS-SELECT ReadMe
@vtmn/css-text-input ReadMe

المؤشرات

@VTMN/CSS-BADGE ReadMe
@VTMN/CSS-Loader ReadMe
@VTMN/CSS-PRICE ReadMe
@VTMN/CSS-ProgressBar ReadMe
@VTMN/CSS التصنيف ReadMe
@VTMN/CSS-TAG ReadMe

ملاحة

@VTMN/CSS-breadcrumb ReadMe
@vtmn/css-navbar ReadMe
@VTMN/CSS-Search ReadMe
@VTMN/CSS-TABS ReadMe

تراكب

@VTMN/CSS-Alert ReadMe
@VTMN/CSS-Modal ReadMe
@vtmn/css-popover ReadMe
@vtmn/css-snackbar ReadMe
@VTMN/CSS-TOST ReadMe
@VTMN/CSS-TOOLTIP ReadMe

ضوابط الاختيار

@vtmn/css-checkbox ReadMe
@VTMN/CSS-CHIP ReadMe
@VTMN/CSS-QUANTITY ReadMe
@vtmn/css-radio-button ReadMe
@vtmn/css-toggle ReadMe

بناء

@vtmn/css-accordion ReadMe
@VTMN/CSS-CARD ReadMe
@VTMN/CSS-Divider ReadMe
@VTMN/CSS-List ReadMe
@VTMN/CSS-Skeleton ReadMe
للمرافق
@VTMN/CSS- الاستخدامات ReadMe

أيقونات

توفر لك هذه الحزمة مكتبة من أيقونات SVG التي يمكنك تضمينها بعدة طرق (SVGs ، خط الرمز ، العفاريت ، CSS ، مضمنة) :

@VTMN/الرموز ReadMe

أصول ؟

توفر لك هذه الحزمة مكتبة من أصول SVG التي يمكنك تضمينها بعدة طرق (SVGs ، خط الأصول ، العفريت ، CSS ، مضمن) :

@VTMN/الأصول ReadMe

حزم المجتمع

من أجل تعزيز تجربة المطورين الخاصة بك ، نقدم لك إمكانية تطوير مكوناتك في React و Svelte و Vue بناءً على حزمنا الأساسية أعلى مباشرة. تم تطوير هذه المكتبات وصيانتها من قبل المجتمع ، وسيكون فريق فيتامين كور هناك للمراجعة ، وضمان جودة مقترحاتك ، لا تتردد في المساهمة!

رد فعل؟

توفر لك هذه الحزمة مكتبة من مكونات React:

@VTMN/رد فعل ReadMe

سفيلتي؟

توفر لك هذه الحزمة مكتبة من مكونات Svelte:

@vtmn/svelte ReadMe

Vue؟

توفر لك هذه الحزمة مكتبة من مكونات VUE:

@VTMN/VUE ReadMe

المساهمة

يتمثل أحد أهداف نظام تصميم Decathlon في توفير إرشادات ومكونات لاكتسابها في الاتساق والكفاءة وإمكانية الوصول إليها. أفضل طريقة لتحقيق ذلك هي معًا! لهذا السبب نحن على جيثب. نود مساهمات المجتمع (تقارير الأخطاء ، وطلبات الميزات ، والاقتراحات ، وطلبات السحب ، كل ما تريد!) .

يتم استخدام مساحات عمل الغزل و NX لإدارة التبعيات وبناء التكوين عبر الحزم. يستخدم Lerna لإدارة الإصدار والنشر.

قم بتشغيل ما يلي لإعداد بيئة Dev المحلية: 

 # Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install
brew install yarn

# Clone or fork `vitamin-web`
git clone [email protected]:Decathlon/vitamin-web.git # or your fork
cd vitamin-web

# install dependencies
yarn

# build all packages
yarn build

# start all showcases and build sources in watch mode & hot reload
yarn start
# or you can launch separately (recommended)
yarn start:css
yarn start:icons
yarn start:react
yarn start:svelte
yarn start:vue

انظر المستندات المساهمة لمزيد من المعلومات حول كيفية المساهمة.

شكر خاص

شكرًا للمساهمين المشاركين في مكتبات فيتامين ويب (حتى قبل أن تكون مفتوحة المصدر) . ؟

شكرًا لك أيضًا Icon Remix لأن أيقونات Vitamix هي مكتبة أيقونة Decathlon الرسمية استنادًا إلى مكتبة أيقونة المصدر المفتوح (Remix Design © 2020). تقع هذه المكتبة الأصلية تحت ترخيص Apache 2.0 وتم تعديلها بواسطة Decathlon. يتعلم أكثر.

رخصة 

 Copyright 2021 Decathlon.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل