Παρουσιάζουμε το κορδόνι παπουτσιών, μια βιβλιοθήκη UX που βασίζεται σε στοιχεία ανεξάρτητο από το πλαίσιο

Αυτή είναι μια ανάρτηση για ΚΟΡΔΟΝΙ ΠΑΠΟΥΤΣΙΟΥ, μια βιβλιοθήκη στοιχείων από Κόρι ΛαΒίσκα, αλλά με μια ανατροπή. Καθορίζει όλα τα τυπικά στοιχεία UX σας: καρτέλες, μοντάλ, ακορντεόν, αυτόματη συμπλήρωση και πολύ, πολύ περισσότερο. Φαίνονται όμορφα από το κουτί τους, είναι προσβάσιμα και πλήρως προσαρμόσιμα. Αλλά αντί να δημιουργεί αυτά τα στοιχεία στο React, ή Solid, ή Svelte, κ.λπ., τα δημιουργεί με Στοιχεία Ιστού; αυτό σημαίνει ότι μπορείτε να τα χρησιμοποιήσετε με κάθε δομή.

Κάποια προκαταρκτικά πράγματα

Τα στοιχεία Web είναι υπέροχα, αλλά προς το παρόν υπάρχουν μερικά μικρά προβλήματα που πρέπει να γνωρίζετε.

Αντίδραση

Είπα ότι λειτουργούν σε οποιοδήποτε πλαίσιο JavaScript, αλλά όπως έχω γράψει πριν, η υποστήριξη του React για τα Web Components είναι επί του παρόντος φτωχός. Για να αντιμετωπιστεί αυτό, στην πραγματικότητα το κορδόνι δημιούργησε περιτυλίγματα μόνο για το React.

Μια άλλη επιλογή, που προσωπικά μου αρέσει, είναι να δημιουργήσω ένα λεπτό συστατικό React που δέχεται το όνομα ετικέτας ενός στοιχείου Web και όλα τα χαρακτηριστικά και τις ιδιότητές του και, στη συνέχεια, κάνει τη βρώμικη δουλειά του χειρισμού των ελλείψεων του React. Μίλησα για αυτήν την επιλογή σε μια προηγούμενη ανάρτηση. Μου αρέσει αυτή η λύση γιατί έχει σχεδιαστεί για διαγραφή. Το πρόβλημα διαλειτουργικότητας του Web Component έχει επιδιορθωθεί επί του παρόντος στον πειραματικό κλάδο του React, επομένως, μόλις αποσταλεί, οποιοδήποτε λεπτό διαλειτουργικό στοιχείο Web Component που χρησιμοποιείτε θα μπορούσε να αναζητηθεί και να αφαιρεθεί, αφήνοντάς σας άμεσες χρήσεις του Web Component, χωρίς περιτύλιγμα React.

Απόδοση διακομιστή (SSR)

Η υποστήριξη για το SSR είναι επίσης φτωχή τη στιγμή που γράφεται αυτό το άρθρο. Θεωρητικά, κάτι λέγεται Δηλωτικό Shadow DOM (DSD) που θα επέτρεπε το SSR. Αλλά η υποστήριξη του προγράμματος περιήγησης είναι ελάχιστη, και σε κάθε περίπτωση, το DSD απαιτεί πραγματικά υποστήριξη διακομιστή να δουλεύεις σωστά, που σημαίνει Επόμενο, Remix, ή οτιδήποτε τυχαίνει να χρησιμοποιείτε στον διακομιστή θα πρέπει να είναι ικανό για κάποιο ειδικό χειρισμό.

Τούτου λεχθέντος, υπάρχουν άλλοι τρόποι για να μεταφέρετε τα στοιχεία Web απλά δουλειά με μια εφαρμογή Ιστού που είναι SSR'd με κάτι σαν το Next. Η σύντομη έκδοση είναι ότι τα σενάρια που καταχωρούν τα στοιχεία Ιστού σας πρέπει να εκτελούνται σε ένα σενάριο αποκλεισμού πριν αναλυθεί η σήμανσή σας. Αλλά αυτό είναι θέμα για άλλη ανάρτηση.

Φυσικά, εάν δημιουργείτε οποιοδήποτε είδος SPA που αποδίδεται από τον πελάτη, αυτό δεν είναι θέμα. Με αυτό θα δουλέψουμε σε αυτήν την ανάρτηση.

Ας αρχίσουμε

Εφόσον θέλω αυτή η ανάρτηση να επικεντρωθεί στο κορδόνι παπουτσιών και στη φύση του στο Web Component, θα το χρησιμοποιήσω Λυγερή για όλα. Θα χρησιμοποιήσω και αυτό Έργο Stackblitz για επίδειξη. Θα δημιουργήσουμε μαζί αυτό το demo, βήμα προς βήμα, αλλά μη διστάσετε να ανοίξετε αυτό το REPL ανά πάσα στιγμή για να δείτε το τελικό αποτέλεσμα.

Θα σας δείξω πώς να χρησιμοποιείτε το κορδόνι παπουτσιών και το πιο σημαντικό, πώς να το προσαρμόσετε. Θα μιλήσουμε για Σκιώδη DOM και ποια στυλ μπλοκάρουν από τον έξω κόσμο (καθώς και ποια όχι). Θα μιλήσουμε επίσης για το ::part Επιλογέας CSS — ο οποίος μπορεί να είναι εντελώς νέος για εσάς — και θα δούμε ακόμη πώς το Shoelace μας επιτρέπει να παρακάμψουμε και να προσαρμόσουμε τα διάφορα κινούμενα σχέδια του.

Αν διαπιστώσετε ότι σας αρέσει το κορδόνι παπουτσιών αφού διαβάσετε αυτήν την ανάρτηση και θέλετε να το δοκιμάσετε σε ένα έργο React, η συμβουλή μου είναι να χρησιμοποιήσετε ένα περιτύλιγμα όπως ανέφερα στην εισαγωγή. Αυτό θα σας επιτρέψει να χρησιμοποιήσετε οποιοδήποτε από τα στοιχεία του Shoelace και μπορεί να αφαιρεθεί εντελώς μόλις το React αποστείλει τις διορθώσεις του στοιχείου Web που έχουν ήδη (αναζητήστε το στην έκδοση 19).

Σας παρουσιάζουμε το κορδόνι

Το κορδόνι έχει αρκετά λεπτομερή Οδηγίες Εγκατάστασης. Το πιο απλό είναι, μπορείτε να το πετάξετε και ετικέτες στο έγγραφό σας HTML, και αυτό είναι αυτό. Για οποιαδήποτε εφαρμογή παραγωγής, ωστόσο, πιθανότατα θα θέλετε να εισάγετε επιλεκτικά μόνο ό,τι θέλετε, και υπάρχουν και οδηγίες για αυτό.

Με το κορδόνι παπουτσιών εγκατεστημένο, ας δημιουργήσουμε ένα στοιχείο Svelte για να αποδώσουμε κάποιο περιεχόμενο και, στη συνέχεια, να ακολουθήσουμε τα βήματα για να το προσαρμόσουμε πλήρως. Για να διαλέξω κάτι αρκετά μη τετριμμένο, πήγα με τις καρτέλες και τα στοιχεία διαλόγου (που συνήθως αναφέρονται ως modal). Εδώ είναι κάποια σήμανση λαμβάνονται σε μεγάλο βαθμό από τα έγγραφα:

  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 που είναι ήδη καλά τεκμηριωμένα στον ιστότοπο Shoelace. Αντίθετα, ας δούμε πώς να αλληλεπιδράσουμε καλύτερα και να προσαρμόσουμε πλήρως αυτά τα στοιχεία Ιστού.

Αλληλεπίδραση με το 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 στήριγμα που ελέγχει αν ο διάλογος είναι… ανοιχτός. Ας το δηλώσουμε στο στοιχείο Svelte:

  let tabs;
  let open = false;

Έχει επίσης ένα sl-hide συμβάν για όταν το παράθυρο διαλόγου είναι κρυφό. Ας περάσουμε το δικό μας open στήριξε και δέσε στο hide συμβάν ώστε να μπορούμε να το επαναφέρουμε όταν ο χρήστης κάνει κλικ εκτός του περιεχομένου διαλόγου για να το κλείσει. Και ας προσθέσουμε ένα πρόγραμμα χειρισμού κλικ σε αυτό το κουμπί κλεισίματος για να ορίσουμε το δικό μας open στήριγμα σε false, το οποίο θα έκλεινε επίσης το παράθυρο διαλόγου.

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

Τέλος, ας συνδέσουμε το κουμπί ανοιχτού διαλόγου:

 (open = true)}>Open Dialog

Και αυτό είναι αυτό. Η αλληλεπίδραση με το API μιας βιβλιοθήκης στοιχείων είναι λίγο πολύ απλή. Αν μόνο αυτό έκανε αυτή η ανάρτηση, θα ήταν αρκετά βαρετό.

Αλλά το κορδόνι - που κατασκευάζεται με στοιχεία Web - σημαίνει ότι ορισμένα πράγματα, ιδιαίτερα τα στυλ, θα λειτουργούν λίγο διαφορετικά από ό,τι μπορεί να έχουμε συνηθίσει.

Προσαρμόστε όλα τα στυλ!

Από τη στιγμή που γράφεται αυτό το άρθρο, το Shoelace είναι ακόμα σε έκδοση beta και ο δημιουργός εξετάζει το ενδεχόμενο αλλαγής ορισμένων προεπιλεγμένων στυλ, πιθανώς ακόμη και να αφαιρέσει ορισμένες προεπιλογές εντελώς, ώστε να μην παρακάμπτουν πλέον τα στυλ της εφαρμογής κεντρικού υπολογιστή σας. Οι έννοιες που θα καλύψουμε είναι σχετικές με κάθε τρόπο, αλλά μην εκπλαγείτε αν ορισμένες από τις ιδιαιτερότητες του κορδονιού που αναφέρω είναι διαφορετικές όταν το χρησιμοποιείτε.

Όσο ωραία κι αν είναι τα προεπιλεγμένα στυλ του Shoelace, μπορεί να έχουμε τα δικά μας σχέδια στην εφαρμογή ιστού μας και θα θέλουμε τα στοιχεία UX μας να ταιριάζουν. Ας δούμε πώς θα το κάνουμε αυτό σε έναν κόσμο Web Components.

Δεν θα προσπαθήσουμε ουσιαστικά βελτίωση Οτιδήποτε. Ο δημιουργός του παπουτσιού είναι πολύ καλύτερος σχεδιαστής από ό,τι θα γίνω ποτέ. Αντίθετα, θα δούμε απλώς πώς να το κάνουμε αλλαγή πράγματα, ώστε να μπορείτε να προσαρμοστείτε στις δικές σας εφαρμογές ιστού.

Μια γρήγορη περιήγηση στα Shadow DOM

Ρίξτε μια ματιά σε μία από αυτές τις κεφαλίδες καρτελών στο DevTools σας. θα πρέπει να μοιάζει κάπως έτσι:

Το στοιχείο καρτέλας μας δημιούργησε ένα div δοχείο με α .tab και .tab--active τάξη, και α tabindex, ενώ εμφανίζεται και το κείμενο που πληκτρολογήσαμε για αυτήν την καρτέλα. Αλλά παρατηρήστε ότι κάθεται μέσα σε ένα ρίζα σκιάς. Αυτό επιτρέπει στους συντάκτες του Web Component να προσθέτουν τη δική τους σήμανση στο στοιχείο Web, παρέχοντας ταυτόχρονα μια θέση για το περιεχόμενο we προμηθεύω. Παρατηρήστε το στοιχείο? Αυτό ουσιαστικά σημαίνει «βάλτε οποιοδήποτε περιεχόμενο απέδωσε ο χρήστης μεταξύ τις ετικέτες του στοιχείου Web εδώ. "

Ετσι το Το στοιχείο δημιουργεί μια σκιώδη ρίζα, προσθέτει κάποιο περιεχόμενο σε αυτό για να αποδώσει την κεφαλίδα της καρτέλας με όμορφο στιλ μαζί με ένα σύμβολο κράτησης θέσης () που αποδίδει το περιεχόμενό μας μέσα.

Ενθυλακωμένα στυλ

Ένα από τα κλασικά, πιο απογοητευτικά προβλήματα στην ανάπτυξη ιστού ήταν πάντα τα στυλ υπερχείλιση σε μέρη που δεν τα θέλουμε. Ενδέχεται να ανησυχείτε ότι τυχόν κανόνες στυλ στην εφαρμογή μας που καθορίζουν κάτι παρόμοιο 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 Lace Lace

Η συστατικό διαβάζει ένα --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;
}

Και αυτό είναι!

Προσαρμογή κινούμενων εικόνων

Για λίγο κερασάκι στη μεταφορική τούρτα, ας δούμε πώς το Shoelace μας επιτρέπει να προσαρμόζουμε κινούμενα σχέδια. Το κορδόνι χρησιμοποιεί το Web Animations 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 αρχείο. Σχολιάστε το για να δείτε το αρχικό, προεπιλεγμένο animation.

Ολοκληρώνοντας

Το κορδόνι παπουτσιών είναι μια απίστευτα φιλόδοξη βιβλιοθήκη στοιχείων που έχει δημιουργηθεί με στοιχεία Web. Δεδομένου ότι τα στοιχεία Web είναι ανεξάρτητα από το πλαίσιο, μπορούν να χρησιμοποιηθούν σε οποιοδήποτε έργο, με οποιοδήποτε πλαίσιο. Με τα νέα πλαίσια που αρχίζουν να βγαίνουν με εκπληκτικά χαρακτηριστικά απόδοσης και επίσης ευκολία στη χρήση, η δυνατότητα χρήσης ποιοτικών γραφικών στοιχείων εμπειρίας χρήστη που δεν συνδέονται με κανένα πλαίσιο δεν ήταν ποτέ πιο συναρπαστική.