Percantik proyek Svelte Anda dengan pustaka Bootstrap CSS yang populer.

Svelte adalah pilihan yang sangat baik untuk membangun antarmuka pengguna dan, meskipun menulis gaya khusus mungkin cukup untuk proyek kecil, pustaka komponen seringkali lebih baik untuk proyek skala besar.

Perpustakaan tersebut menawarkan keuntungan seperti UI yang konsisten, peningkatan aksesibilitas, dan opsi penyesuaian yang fleksibel. Pelajari bagaimana Anda dapat bekerja dengan pustaka komponen SvelteStrap untuk menyederhanakan pengembangan Anda.

Apa itu Svelte dan Bootstrap?

Svelte adalah kerangka kerja JavaScript, yang berbeda dari pendekatan konvensional yang diambil oleh kerangka kerja seperti React. Daripada menjalankan sebagian besar operasinya pada saat run-time, Svelte mengkompilasi aplikasi Anda ke JavaScript selama proses pembangunan.

Pendekatan unik ini menghilangkan kebutuhan akan virtual Model Objek Dokumen (DOM) dan secara signifikan mengurangi kode boilerplate.

Bootstrap adalah kerangka CSS, dibuat oleh Twitter (sekarang bermerek X), yang memelopori filosofi desain “yang mengutamakan seluler”. Ia menawarkan banyak komponen yang telah dirancang sebelumnya.

instagram viewer

Memasang Sveltetrap di Proyek Anda

Sebelum Anda dapat menginstal Sveltetrap di proyek Anda, Anda perlu memastikan proyek Svelte Anda telah diatur dengan benar. Pastikan Anda memiliki Node.js dan Manajer Paket Node (NPM) atau Benang yang berjalan di mesin Anda. Anda dapat merancang proyek Svelte baru dengan perintah ini:

npm create vite
# or
yarn create vite

Beri nama proyek Svelte Anda dan ketika diminta untuk memilih kerangka kerja dan varian, pilih Svelte dan JavaScript masing-masing. Setelah melakukan itu, CD ke dalam direktori proyek dan jalankan:

npm install
# or
yarn

Perintah ini akan menginstal dependensi yang diperlukan untuk proyek Svelte pada umumnya.

Setelah proyek Svelte Anda siap, Anda sekarang dapat menginstal perpustakaan Sveltetrap dengan menjalankan:

npm i sveltestrap
# or
yarn add sveltestrap

Jika Anda mengalami kesalahan “tidak dapat menyelesaikan pohon ketergantungan” selama instalasi Sveltetrap, atasi dengan menjalankan perintah terminal berikut:

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

Kemudian, lanjutkan dengan instalasi Sveltetrap atau pertimbangkan untuk menggunakan Yarn sebagai manajer paket alternatif.

Hapus itu aktiva dan itu lib folder, lalu bersihkan isinya Aplikasi.svelte berkas dan Aplikasi.css mengajukan. Setelah itu, Anda dapat memulai server pengembangan dengan menjalankan:

npm run dev
# or
yarn dev

Menggunakan Sveltetrap di Proyek Anda

Untuk mulai menggunakan Sveltetrap, Anda perlu menyertakan link ke style sheet Bootstrap menggunakan link CDN. Anda dapat melakukan ini di dalam kepala elemen dalam tata letak HTML Anda atau dari langsing: kepala tag di komponen Svelte Anda.

Buka indeks.html file, dan tambahkan yang berikut ini ke kepala elemen:

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

Jika mau, Anda dapat mengimpor atau menambahkan tautan tandai langsung di langsing: kepala elemen khusus seperti ini:

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

Alternatifnya, Anda dapat menggunakan @impor memerintah di gaya tag komponen apa pun seperti ini:

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

Komponen Tombol di Sveltetrap

Kerangka kerja Bootstrap standar menyediakan berbagai nama kelas yang dapat Anda gunakan untuk menata tombol. Opsi kelas ini menyertakan nama seperti "utama", "bahaya", "info", "tautan", dan banyak lainnya.

Di Sveltetrap, masing-masing Tombol komponen dengan mudah menampilkan penyangga warna yang selaras dengan opsi gaya default Bootstrap. Ini membantu menyederhanakan proses penyesuaian. Untuk mengimpor komponen seperti tombol, tambahkan yang berikut ini di mana saja .langsing file komponen, seperti src/App.svelte: