قم بتجميل مشاريع Svelte الخاصة بك باستخدام مكتبة Bootstrap CSS الشهيرة.

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

توفر هذه المكتبات مزايا مثل واجهة المستخدم المتسقة وإمكانية الوصول المحسنة وخيارات التخصيص المرنة. تعرف على كيفية العمل مع مكتبة مكونات SvelteStrap لتبسيط التطوير الخاص بك.

ما هي Svelte وBootstrap؟

Svelte هو إطار عمل JavaScript، والذي يختلف عن النهج التقليدي الذي تتبعه أطر عمل مثل React. بدلاً من تشغيل معظم عملياته في وقت التشغيل، يقوم Svelte بتجميع تطبيقك إلى JavaScript أثناء عملية الإنشاء.

هذا النهج الفريد يلغي الحاجة إلى الظاهري نموذج كائن المستند (DOM) ويقلل بشكل كبير من التعليمات البرمجية النمطية.

Bootstrap هو إطار عمل CSS، التي أنشأتها شركة Twitter (التي تحمل الآن العلامة التجارية X)، والتي كانت رائدة في فلسفة التصميم "الهاتف المحمول أولاً". إنه يوفر ثروة من المكونات المصممة مسبقًا.

تثبيت Sveltestrap في مشروعك

قبل أن تتمكن من تثبيت Sveltestrap في مشروعك، تحتاج إلى التأكد من إعداد مشروع Svelte الخاص بك بشكل صحيح. تأكد من أن لديك Node.js و

instagram viewer
مدير حزمة العقدة (NPM) أو الغزل الذي يعمل على جهازك. يمكنك سقالة مشروع Svelte جديد باستخدام هذا الأمر:

npm create vite
# or
yarn create vite

قم بتسمية مشروع Svelte الخاص بك وعندما يُطلب منك اختيار إطار عمل ومتغير، حدد Svelte وJavaScript على التوالي. بعد القيام بذلك، قرص مضغوط في دليل المشروع وتشغيل:

npm install
# or
yarn

سيقوم هذا الأمر بتثبيت التبعيات اللازمة لمشروع Svelte النموذجي.

بعد أن أصبح مشروع Svelte الخاص بك جاهزًا، يمكنك الآن تثبيت مكتبة Sveltestrap عن طريق تشغيل:

npm i sveltestrap
# or
yarn add sveltestrap

إذا واجهت خطأ "تعذر حل شجرة التبعية" أثناء تثبيت Sveltestrap، فقم بحله عن طريق تشغيل أوامر المحطة الطرفية التالية:

npm config set legacy-peer-deps true
npm cache clean --force

ثم تابع تثبيت Sveltestrap أو فكر في استخدام Yarn كمدير بديل للحزم.

حذف أصول و ال ليب المجلد، ثم قم بمسح محتويات المجلد التطبيق.svelte الملف و App.css ملف. بعد ذلك، يمكنك بدء تشغيل خادم التطوير عن طريق تشغيل:

npm run dev
# or
yarn dev

استخدام Sveltestrap في مشروعك

لبدء استخدام Sveltestrap، تحتاج إلى تضمين رابط إلى ورقة أنماط Bootstrap باستخدام رابط CDN. يمكنك القيام بذلك داخل رأس عنصر في تخطيط HTML الخاص بك أو من رشيق: رأس علامة في مكون Svelte الخاص بك.

افتح ال Index.html الملف، وأضف ما يلي إلى رأس عنصر:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>

إذا كنت تفضل ذلك، يمكنك استيراد أو إضافة وصلة العلامة مباشرة في رشيق: رأس عنصر خاص مثل هذا:

<svelte: head>
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 />
svelte: head>

وبدلاً من ذلك، يمكنك استخدام @يستورد القاعدة في أسلوب علامة لأي مكون مثل هذا:

<style>
 @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
style>

مكون الزر في Sveltestrap

يوفر إطار عمل Bootstrap القياسي مجموعة متنوعة من أسماء الفئات التي يمكنك استخدامها لتصميم الأزرار. تتضمن خيارات الفئات هذه أسماء مثل "أساسي" و"خطر" و"معلومات" و"رابط" وغيرها الكثير.

في سفيلتيتراب، كل منهما زر يتميز المكون بسهولة بدعم الألوان الذي يتوافق مع خيارات التصميم الافتراضية في Bootstrap. وهذا يساعد على تبسيط عملية التخصيص. لاستيراد مكون مثل زر، قم بإضافة ما يلي في أي .ممشوق ملف مكون، مثل src/App.svelte: