יפות את פרויקטי ה-Svelte שלך עם ספריית Bootstrap CSS הפופולרית.
Svelte היא בחירה מצוינת לבניית ממשקי משתמש, ולמרות שכתיבת סגנונות מותאמים אישית עשויה להספיק לפרויקטים קטנים, ספריית רכיבים עדיפה לרוב לפרויקטים בקנה מידה גדול.
ספריות כאלה מציעות יתרונות כמו ממשק משתמש עקבי, נגישות משופרת ואפשרויות התאמה אישית גמישות. למד כיצד תוכל לעבוד עם ספריית הרכיבים SvelteStrap כדי לייעל את הפיתוח שלך.
מה הם Svelte ו-Bootstrap?
Svelte היא מסגרת JavaScript, החורגת מהגישה המקובלת של מסגרת כמו React. במקום להפעיל את רוב הפעולות שלה בזמן ריצה, Svelte מרכיב את האפליקציה שלך ל-JavaScript במהלך תהליך הבנייה.
גישה ייחודית זו מבטלת את הצורך בוירטואלית מודל אובייקט מסמך (DOM) ומפחית משמעותית את קוד ה-boilerplate.
Bootstrap היא מסגרת CSS, שנוצרה על ידי טוויטר (כיום ממותגת X), שהייתה חלוצה בפילוסופיית העיצוב "המובייל תחילה". הוא מציע שפע של רכיבים שתוכננו מראש.
התקנת Sveltestrap בפרויקט שלך
לפני שתוכל להתקין את Sveltestrap בפרויקט שלך, עליך לוודא שפרויקט Svelte שלך מוגדר כהלכה. ודא שיש לך Node.js ו מנהל חבילות צומת (NPM) או חוט הפועל על המכונה שלך. אתה יכול לטפח פרויקט Svelte חדש עם הפקודה הזו:
npm create vite
# or
yarn create vite
תן שם לפרויקט Svelte שלך וכאשר תתבקש לבחור מסגרת וגרסה, בחר Svelte ו-JavaScript בהתאמה. אחרי שעשיתי את זה, CD לתוך ספריית הפרויקט והפעל:
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 כמנהל חבילות חלופי.
מחק את ה נכסים וה lib התיקיה, ואז נקה את התוכן של App.svelte הקובץ וה- App.css קוֹבֶץ. לאחר מכן, תוכל להפעיל את שרת הפיתוח על ידי הפעלת:
npm run dev
# or
yarn dev
שימוש ב-Sveltestrap בפרויקט שלך
כדי להתחיל להשתמש ב-Sveltestrap, עליך לכלול קישור לגיליון הסגנונות של Bootstrap באמצעות קישור CDN. אתה יכול לעשות זאת בתוך רֹאשׁ אלמנט בפריסת ה-HTML שלך או מה- svelte: ראש תג ברכיב Svelte שלך.
פתח את ה index.html קובץ, והוסיפו את הדברים הבאים ל- רֹאשׁ אֵלֵמֶנט:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
אם אתה מעדיף, אתה יכול לייבא או להוסיף את קישור תג ישירות ב- svelte: ראש אלמנט מיוחד כמו זה:
<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:
