sveltestrap

Bootstrap 5 مكونات لـ Svelte 4+

Sveltestrap هي مكتبة مصممة لتبسيط تكامل مكونات Bootstrap 5 في تطبيقات Svelte الخاصة بك. إنه يلغي الحاجة إلى فئات مكونات bootstrap ، وإدراج جافا سكريبت Bootstrap ، والاعتماد على jQuery.

هذا البرنامج مفتوح المصدر متاح مجانًا بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. يستمد الإلهام من مكتبة ReactStrap للرد.

يرجى ملاحظة أن Sveltestrap لا يدمج نمط bootstrap مباشرة . لاستخدام موضوعات bootstrap بشكل فعال ، يجب أن تتضمن bootstrap 5 CSS باستخدام إحدى الطرق الموضحة أدناه.

ملاحظة إذا كنت تبحث عن دعم Svelte 3.x ، فيمكنك استخدام حزمة Sveltestrap الأصلية.

انضم إلى المجتمع

---

ثَبَّتَ

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

من الضروري أن نلاحظ أن مكونات Bootstrap 5 لا تأتي مع أنماط bootstrap تم تحميلها مسبقًا ، لذلك ستحتاج إلى إضافة ورقة الأنماط يدويًا. إليك كيف يمكنك إضافتها:

1. أضف إلى ملف index.html تطبيقات التطبيقات

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

2. أضف إلى ملف App.svelte الرئيسي الخاص بك

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

3. استيراد الأنماط مباشرة في حزمة CSS الخاصة بك

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

4. استخدم مكون الأنماط المقدمة

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles />

ثم استخدم مكونات Sveltestrap في مكونك المسلح:

 < script >
  import { Button , Col , Row } from '@sveltestrap/sveltestrap' ;
</ script >

< Row >
  < Col >
    < Button color =" primary " outline > Hello World! </ Button >
  </ Col >
</ Row > 

رموز bootstrap

إذا كنت ترغب في استخدام مكون الأيقونة ، فيجب عليك أيضًا تضمين رابط لـ Bootstrap Icon CSS ، على سبيل المثال:

قم بتضمينه في App.svelte التطبيق الخاص بك:

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

أو يمكنك تضمينه في index.html الخاص بالتطبيق الخاص بك

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

أو يتضمن مكون الأنماط CSS Bootstrap افتراضيًا:

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles /> 

الرعاة

المشرفون

المساهمين