sveltestrap

bootstrap 5 ส่วนประกอบสำหรับ svelte 4+

Sveltestrap เป็นห้องสมุดที่ออกแบบมาเพื่อลดความซับซ้อนของการรวมส่วนประกอบ bootstrap 5 ลงในแอปพลิเคชัน Svelte ของคุณ มันไม่จำเป็นต้องใช้คลาสส่วนประกอบ bootstrap การรวม JavaScript ของ Bootstrap และการพึ่งพา jQuery

ซอฟต์แวร์โอเพนซอร์ซนี้มีให้บริการอย่างอิสระภายใต้ใบอนุญาต MIT ที่ได้รับอนุญาต มันดึงแรงบันดาลใจจากไลบรารี ReactStrap สำหรับ React

โปรดทราบว่า 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 ในส่วนประกอบ svelte ของคุณ:

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

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

ไอคอน bootstrap

หากคุณต้องการใช้ส่วนประกอบไอคอนคุณต้องรวมลิงค์ไปยังไอคอน Bootstrap 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 "
/>

หรือส่วนประกอบสไตล์รวมถึงไอคอน bootstrap CSS ตามค่าเริ่มต้น:

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

< Styles /> 

ผู้สนับสนุน

ผู้ดูแล

ผู้มีส่วนร่วม