הכירו את Shoelace, ספריית UX מבוססת רכיבים עצמאית ללא מסגרת

זה פוסט על שׂרוֹך, ספריית רכיבים מאת קורי לאוויסקה, אבל עם טוויסט. הוא מגדיר את כל רכיבי ה-UX הסטנדרטיים שלך: כרטיסיות, מודלים, אקורדיונים, השלמות אוטומטיות ו הרבה הרבה יותר. הם נראים יפים מחוץ לקופסה, נגישים וניתנים להתאמה אישית מלאה. אבל במקום ליצור את הרכיבים האלה ב-React, או Solid, או Svelte וכו', הוא יוצר אותם עם רכיבי רשת; זה אומר שאתה יכול להשתמש בהם עם כל מסגרת.

כמה דברים מקדימים

רכיבי אינטרנט הם נהדרים, אבל יש כרגע כמה תקלות קטנות שצריך להיות מודע להן.

להגיב

אמרתי שהם עובדים בכל מסגרת JavaScript, אבל כפי שכתבתי בעבר, התמיכה של React עבור Web Components היא כרגע עניים. כדי לטפל בזה, שרוך נעליים למעשה יצרו עטיפות רק בשביל React.

אפשרות נוספת, שאני אישית אוהב, היא ליצור רכיב React דק שמקבל את שם התג של Web Component ואת כל התכונות והמאפיינים שלו, ואז עושה את העבודה המלוכלכת של טיפול בחסרונות של React. דיברתי על האפשרות הזו בפוסט הקודם. אני אוהב את הפתרון הזה כי הוא נועד להימחק. בעיית התפעול ההדדית של רכיבי ה-Web תוקנה כעת בענף הניסיוני של React, כך שברגע שזה נשלח, ניתן יהיה לחפש ולהסיר כל רכיב דק-קומפרפרטיבי של רכיבי Web שבו אתה משתמש, מה שמשאיר אותך עם שימושים ישירים ברכיבי הרשת, ללא עטיפות של React.

טיוח בצד השרת (SSR)

גם התמיכה ב-SSR גרועה בזמן כתיבת שורות אלה. בתיאוריה, יש משהו שנקרא Shadow DOM הצהרתי (DSD) אשר יאפשר SSR. אבל התמיכה בדפדפן היא מינימלית, ובכל מקרה, DSD למעשה דורש תמיכה בשרת לעבוד נכון, כלומר הַבָּא, Remix, או כל מה שבמקרה תשתמש בשרת יצטרך להיות מסוגל לטיפול מיוחד.

עם זאת, יש דרכים אחרות להגיע אל רכיבי אינטרנט פשוט לעבוד עם אפליקציית אינטרנט שמוגדרת ב-SSR עם משהו כמו Next. הגרסה הקצרה היא שהסקריפטים הרושמים את רכיבי האינטרנט שלך צריכים לפעול בסקריפט חוסם לפני ניתוח הסימון שלך. אבל זה נושא לפוסט אחר.

כמובן, אם אתה בונה כל סוג של ספא מעובד על ידי לקוח, זו לא בעיה. זה מה שנעבוד איתו בפוסט הזה.

בואו נתחיל

מכיוון שאני רוצה שהפוסט הזה יתמקד בשרוך נעליים ובאופי רכיב האינטרנט שלו, אני אשתמש תָמִיר לכל דבר. אני גם אשתמש בזה פרוייקט Stackblitz להפגנה. נבנה יחד את ההדגמה הזו, צעד אחר צעד, אבל אל תהסס לפתוח את ה-REPL הזה בכל עת כדי לראות את התוצאה הסופית.

אני אראה לך כיצד להשתמש בשרוך נעליים, וחשוב מכך, כיצד להתאים אותו. נדבר על Shadow DOMs ואיזה סגנונות הם חוסמים מהעולם החיצון (וכן אילו הם לא). נדבר גם על ::part בורר CSS - שעשוי להיות חדש לגמרי עבורך - ואפילו נראה כיצד Shoelace מאפשר לנו לעקוף ולהתאים אישית את האנימציות השונות שלו.

אם אתה מוצא שאתה אוהב את שרוך הנעליים לאחר קריאת הפוסט הזה ורוצה לנסות אותו בפרויקט React, העצה שלי היא להשתמש עטיפה כמו שציינתי בהקדמה. זה יאפשר לך להשתמש בכל אחד מהרכיבים של Shoelace, וניתן להסיר אותו לגמרי ברגע ש-React שולח את תיקוני ה-Web Component שכבר יש להם (חפש את זה בגרסה 19).

היכרות עם שרוך נעליים

שרוך נעליים מפורט למדי הוראות התקנה. במקרה הפשוט ביותר, אתה יכול לזרוק ו תגים לתוך מסמך ה-HTML שלך, וזהו. עם זאת, עבור כל אפליקציית ייצור, סביר להניח שתרצה לייבא באופן סלקטיבי רק את מה שאתה רוצה, ויש גם הוראות לכך.

כששרוך נעליים מותקן, בואו ניצור רכיב Svelte לעיבוד תוכן מסוים, ולאחר מכן נעבור על השלבים כדי להתאים אותו באופן מלא. כדי לבחור משהו לא טריוויאלי למדי, הלכתי עם רכיבי הכרטיסיות ודיאלוג (המכונה בדרך כלל מודאלית). הנה קצת סימון נלקח בעיקר מהמסמכים:

  General
  Custom
  Advanced
  Disabled

  This is the general tab panel.
  This is the custom tab panel.
  This is the advanced tab panel.
  This is a disabled tab panel.



  Hello World!
  Close




Open Dialog

זה יוצר כמה כרטיסיות נחמדות ומעוצבות. הקו התחתון בכרטיסייה הפעילה אפילו מעורר הנפשה יפה, וגולש מכרטיסייה פעילה אחת לאחרת.

אני לא אבזבז את זמנכם בריצה על כל סנטימטר של ממשקי ה-API שכבר מתועדים היטב באתר שרוך. במקום זאת, הבה נבחן כיצד ליצור אינטראקציה עם רכיבי האינטרנט הללו ולהתאים אותם באופן מלא.

אינטראקציה עם ה-API: שיטות ואירועים

שיטות ההתקשרות וההרשמה לאירועים ברכיב אינטרנט עשויים להיות שונים במקצת ממה שהורגלת אליו במסגרת הרגילה שבחרתם, אבל זה לא מסובך מדי. בוא נראה איך.

כרטיסיות

רכיב הכרטיסיות () יש show שיטה, אשר מציג ידנית כרטיסייה מסוימת. כדי לקרוא לזה, אנחנו צריכים לקבל גישה לאלמנט ה-DOM הבסיסי של הכרטיסיות שלנו. ב-Svelte, זה אומר להשתמש bind:this. ב-React, זה יהיה א ref. וכן הלאה. מכיוון שאנו משתמשים ב-Svelte, בואו נכריז על משתנה עבור שלנו tabs למשל:

  let tabs;

...וכרכו אותו:

עכשיו אנחנו יכולים להוסיף כפתור לקרוא לזה:

 tabs.show("custom")}>Show custom

זה אותו רעיון לאירועים. יש sl-tab-show אירוע שנדלק כאשר מוצגת כרטיסייה חדשה. יכולנו להשתמש addEventListener עלינו tabs משתנה, או שנוכל להשתמש ב-Svelte's on:event-name קיצור.

 console.log(e)}>

זה עובד ומתעד את אובייקטי האירוע בזמן שאתה מציג כרטיסיות שונות.

בדרך כלל אנו מעבדים כרטיסיות ונותנים למשתמש ללחוץ ביניהן, כך שבדרך כלל העבודה הזו אפילו לא נחוצה, אבל היא שם אם אתה צריך אותה. עכשיו בואו נעשה את רכיב הדו-שיח לאינטראקטיבי.

דיאלוג

רכיב הדו-שיח () לוקח open prop אשר שולט אם תיבת הדו-שיח פתוחה. בואו נכריז על זה ברכיב Svelte שלנו:

  let tabs;
  let open = false;

יש לו גם sl-hide אירוע כאשר תיבת הדו-שיח מוסתרת. בוא נעבור את שלנו open להאחז ולקשר את hide אירוע כדי שנוכל לאפס אותו כאשר המשתמש לוחץ מחוץ לתוכן הדו-שיח כדי לסגור אותו. ובואו נוסיף מטפל בלחיצה ללחצן הסגירה הזה כדי להגדיר את שלנו open תמך ל false, שגם יסגור את תיבת הדו-שיח.

 open = false}>
  Hello World!
   open = false}>Close

לבסוף, בואו נחבר את כפתור הדו-שיח הפתוח שלנו:

 (open = true)}>Open Dialog

וזה זה. האינטראקציה עם ה-API של ספריית רכיבים היא פשוטה יותר או פחות. אם זה כל מה שהפוסט הזה עשה, זה יהיה די משעמם.

אבל Shoelace - שנבנה עם רכיבי אינטרנט - אומר שחלק מהדברים, במיוחד סגנונות, יפעלו קצת אחרת ממה שהתרגלנו אליו.

התאם אישית את כל הסגנונות!

נכון לכתיבת שורות אלה, Shoelace עדיין בגרסת בטא והיוצר שוקל לשנות כמה סגנונות ברירת מחדל, אולי אפילו להסיר כמה ברירות מחדל כליל כך שהם לא יעקפו עוד את סגנונות האפליקציה המארח שלך. המושגים שנכסה רלוונטיים בכל מקרה, אבל אל תתפלאו אם חלק מהפרטים הספציפיים של שרוך הנעליים שאני מזכיר הם שונים כשאתם הולכים להשתמש בו.

עד כמה שסגנונות ברירת המחדל של Shoelace נחמדים, ייתכן שיש לנו עיצובים משלנו באפליקציית האינטרנט שלנו, ונרצה שרכיבי ה-UX שלנו יתאימו. בוא נראה איך היינו עושים את זה בעולם של רכיבי אינטרנט.

לא ננסה בעצם לשפר כל דבר. יוצר השרוך ​​הוא מעצב הרבה יותר טוב ממה שאי פעם אהיה. במקום זאת, נסתכל רק כיצד לעשות זאת שינוי דברים, כדי שתוכל להסתגל לאפליקציות האינטרנט שלך.

סיור מהיר ב-Shadow DOMs

תציץ באחת מכותרות הכרטיסיות האלו בכלי ה-DevTools שלך; זה אמור להיראות בערך כך:

אלמנט הכרטיסייה שלנו יצר א div מיכל עם א .tab ו .tab--active כיתה, וא tabindex, תוך הצגת הטקסט שהזנו עבור אותה כרטיסייה. אבל שימו לב שזה יושב בתוך א שורש צל. זה מאפשר למחברי רכיבי אינטרנט להוסיף סימון משלהם לרכיב הרשת תוך מתן מקום לתוכן we לְסַפֵּק. שימו לב ל אֵלֵמֶנט? זה בעצם אומר "שים את כל התוכן שהמשתמש הציג בֵּין תגיות רכיב האינטרנט כאן".

אז ה הרכיב יוצר שורש צל, מוסיף לו קצת תוכן כדי להציג את כותרת הכרטיסייה המעוצבת בצורה יפה יחד עם מציין מיקום () שמציג את התוכן שלנו פנימה.

סגנונות מובלעים

אחת הבעיות הקלאסיות והמתסכלות יותר בפיתוח אתרים הייתה תמיד סגנונות מדורג למקומות שבהם אנחנו לא רוצים אותם. אתה עלול לדאוג שכל סגנון שולט באפליקציה שלנו שמציין משהו כמו div.tab יפריע לכרטיסיות האלה. מסתבר שזו לא בעיה; שורשי צל עוטפים סגנונות. סגנונות מחוץ לשורש הצל אינם משפיעים על מה שנמצא בתוך שורש הצל (למעט כמה חריגים עליהם נדבר), ולהיפך.

החריגים לכך הם סגנונות תורשה. אתה, כמובן, לא צריך להחיל א font-family סגנון עבור כל רכיב באפליקציית האינטרנט שלך. במקום זאת, אתה יכול לציין את שלך font-family פעם אחת, על :root or html ויורש אותו בכל מקום מתחתיו. ירושה זו, למעשה, תנקב גם את שורש הצל.

מאפייני CSS מותאמים אישית (הנקראים לעתים קרובות "משתני css") הם חריג קשור. שורש צל יכול לקרוא באופן מוחלט מאפיין CSS המוגדר מחוץ לשורש הצל; זה יהפוך רלוונטי בעוד רגע.

השמיים ::part בורר

מה עם סגנונות זה לא לָרֶשֶׁת. מה אם אנחנו רוצים להתאים אישית משהו כמו cursor, שאינו יורש, על משהו בתוך שורש הצל. אין לנו מזל? מסתבר שאנחנו לא. הסתכל שוב בתמונת אלמנט הכרטיסייה למעלה ובשורש הצל שלו. שימו לב ל part תכונה על div? זה מאפשר לך למקד ולעצב את האלמנט הזה מחוץ לשורש הצל באמצעות ::part בורר. נעבור על דוגמה היא קצת.

עוקף סגנונות שרוך נעליים

בואו נראה כל אחת מהגישות הללו בפעולה. נכון לעכשיו, הרבה של סגנונות שרוך נעליים, כולל גופנים, מקבלים ערכי ברירת מחדל ממאפייני CSS מותאמים אישית. כדי ליישר את הגופנים האלה עם הסגנונות של היישום שלך, דחוף את האביזרים המותאמים אישית המדוברים. לִרְאוֹת המסמכים למידע על משתני CSS שבו Shoelace משתמש, או שאתה יכול פשוט לבדוק את הסגנונות בכל אלמנט נתון ב-DevTools.

הורדת סגנונות דרך שורש הצללים

פתח את app.css הקובץ src ספרייה של פרויקט StackBlitz. ב :root בחלק התחתון, אתה אמור לראות א letter-spacing: normal; הַצהָרָה. מאז letter-spacing הנכס עובר בירושה, נסה להגדיר ערך חדש, כמו 2px. בשמירה, כל התוכן, כולל כותרות הכרטיסיות המוגדרות בשורש הצללים, יתכווננו בהתאם.

החלפת משתני CSS של שרוך נעליים

השמיים רכיב קורא an --indicator-color מאפיין מותאם אישית של CSS עבור הקו התחתון של הכרטיסייה הפעילה. אנחנו יכולים לעקוף את זה עם כמה CSS בסיסי:

sl-tab-group {
  --indicator-color: green;
}

ובדיוק ככה, עכשיו יש לנו מחוון ירוק!

שאילתות חלקים

בגרסה של שרוך הנעליים שבה אני משתמש כרגע (2.0.0-beta.83), לכל כרטיסייה שאינה מושבתת יש pointer סַמָן. בואו נשנה את זה לסמן ברירת מחדל עבור הכרטיסייה הפעילה (הנבחרה). כבר ראינו שה אלמנט מוסיף א part="base" תכונה במיכל עבור כותרת הכרטיסייה. כמו כן, הכרטיסייה שנבחרה כעת מקבלת active תְכוּנָה. בואו נשתמש בעובדות האלה כדי למקד ללשונית הפעילה, ונשנה את הסמן:

sl-tab[active]::part(base) {
  cursor: default;
}

וזה זה!

התאמה אישית של אנימציות

לקצת דובדבן שבקצפת המטאפורית, בואו נראה כיצד שרוך נעליים מאפשר לנו להתאים אישית אנימציות. שרוך נעליים משתמש ב API של אנימציות אינטרנט, וחושפת א setDefaultAnimation ממשק API כדי לשלוט כיצד אלמנטים שונים מפעילים את האינטראקציות השונות שלהם. ראה את המסמכים לפרטים, אבל כדוגמה, הנה איך אתה יכול לשנות את ברירת המחדל של אנימציית הדו-שיח של Shoelace מהתרחבות כלפי חוץ, והתכווצות פנימה, במקום להנפשה פנימה מלמעלה, ולצניחה למטה תוך כדי הסתרה.

import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";

setDefaultAnimation("dialog.show", {
  keyframes: [
    { opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
  ],
  options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
  keyframes: [
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
    { opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
  ],
  options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});

הקוד הזה נמצא ב- App.svelte קוֹבֶץ. הגיבו על זה כדי לראות את האנימציה המקורית, ברירת המחדל.

גלישה את

שרוך הוא ספריית רכיבים שאפתנית להפליא שנבנתה עם רכיבי אינטרנט. מכיוון שרכיבי אינטרנט אינם תלויי מסגרת, ניתן להשתמש בהם בכל פרויקט, עם כל מסגרת. עם מסגרות חדשות שמתחילות לצאת גם עם מאפייני ביצועים מדהימים וגם קלות שימוש, היכולת להשתמש בווידג'טים איכותיים של חווית משתמש שאינם קשורים לאף מסגרת אחת מעולם לא הייתה משכנעת יותר.