sveltestrap

Bootstrap 5 Komponen untuk Svelte 4+

Sveltestrap adalah perpustakaan yang dirancang untuk menyederhanakan integrasi komponen Bootstrap 5 ke dalam aplikasi SVELTE Anda. Ini menghilangkan kebutuhan untuk kelas komponen bootstrap, dimasukkannya JavaScript Bootstrap, dan ketergantungan pada jQuery.

Perangkat lunak open-source ini tersedia secara bebas di bawah lisensi MIT permisif. Ini menarik inspirasi dari perpustakaan reactstrap untuk bereaksi.

Harap dicatat bahwa Sveltestrap tidak secara langsung menyematkan gaya bootstrap . Untuk menggunakan tema bootstrap secara efektif, Anda harus menyertakan bootstrap 5 CSS menggunakan salah satu metode yang diuraikan di bawah ini.

CATATAN Jika Anda mencari dukungan Svelte 3.x, Anda dapat menggunakan paket Sveltestrap asli.

Bergabunglah dengan komunitas

---

Memasang

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

Sangat penting untuk dicatat bahwa komponen Bootstrap 5 tidak datang dengan gaya bootstrap preloaded, jadi Anda harus menambahkan stylesheet secara manual. Begini cara Anda menambahkannya:

1. Tambahkan ke file statis aplikasi index.html Anda

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

2. Tambahkan ke file App.svelte utama Anda

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

3. Impor gaya langsung di bundel CSS Anda

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

4. Gunakan komponen gaya yang disediakan

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

< Styles />

Kemudian gunakan komponen Sveltestrap di komponen SVELTE Anda:

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

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

Ikon Bootstrap

Jika Anda ingin menggunakan komponen ikon, Anda juga harus menyertakan tautan ke ikon bootstrap CSS, misalnya:

Sertakan di App.svelte aplikasi Anda. Velte:

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

Atau Anda dapat memasukkannya ke dalam index.html aplikasi Anda.

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

atau komponen gaya mencakup ikon bootstrap CSS secara default:

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

< Styles /> 

Sponsor

Pemelihara

Kontributor