Δημιουργός Στοιχείων React Tailwind - Ζωντανή Προεπισκόπηση & Γεννήτρια Κώδικα

Τι είναι το React Tailwind Component Builder;

Το React Tailwind Component Builder είναι ένα δωρεάν εργαλείο που λειτουργεί στο πρόγραμμα περιήγησης και δημιουργεί ένα στοιχείο React με μορφοποίηση Tailwind CSS. Ο χρήστης επιλέγει έναν τύπο στοιχείου, όπως ένα κουμπί ή ένα πεδίο εισαγωγής κειμένου, προσαρμόζει μερικές επιλογές μορφοποίησης και το εργαλείο εμφανίζει μια ζωντανή προεπισκόπηση δίπλα στον αντίστοιχο κώδικα JSX. Όλα εκτελούνται στο πρόγραμμα περιήγησης. Δεν απαιτείται λογαριασμός ή κλήση σε διακομιστή.

Τύποι στοιχείων

Το εργαλείο μπορεί να δημιουργήσει πέντε είδη στοιχείων:

• Κουμπί — ένα κουμπί με δυνατότητα κλικ και προσαρμοσμένο κείμενο
• Εισαγωγή κειμένου — ένα πεδίο φόρμας μίας γραμμής με κείμενο υπόδειξης
• Περιοχή κειμένου — ένα πεδίο φόρμας πολλών γραμμών με καθορισμένο αριθμό γραμμών
• Επιλογή — μια αναπτυσσόμενη λίστα που δημιουργείται από μια λίστα επιλογών
• Διαδρομή πλοήγησης — μια σειρά συνδέσμων που δείχνει τη θέση μιας σελίδας σε έναν ιστότοπο, όπως Αρχική / Προϊόντα / Κατηγορία

Ποιες ιδιότητες μπορούν να αλλάξουν

Πέντε ιδιότητες μορφοποίησης ισχύουν για κάθε τύπο στοιχείου:

• Χρώμα κειμένου — λευκό, μαύρο, γκρι, μπλε, κόκκινο ή πράσινο
• Χρώμα φόντου — κανένα, λευκό, ανοιχτό γκρι, μπλε, κόκκινο ή πράσινο
• Εσωτερικό περιθώριο — κανένα, μικρό, μεσαίο, μεγάλο ή η προεπιλογή του κουμπιού
• Ακτίνα περιγράμματος — καμία, μικρή, μεσαία, μεγάλη ή πλήρως στρογγυλεμένη
• Πλάτος — αυτόματο, πλήρες, ένα δεύτερο, ένα τρίτο ή ένα τέταρτο

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

Τέσσερις ιδιότητες είναι σταθερές και δεν μπορούν να αλλάξουν μέσω της διεπαφής: το εξωτερικό περιθώριο (πάντα m-0), το στυλ περιγράμματος (πάντα border border-transparent), το μέγεθος γραμματοσειράς (πάντα text-base) και το πάχος γραμματοσειράς (πάντα font-medium). Κάθε στοιχείο που δημιουργείται περιλαμβάνει αυτές τις ίδιες τέσσερις κλάσεις. Για να χρησιμοποιήσετε διαφορετικό εξωτερικό περιθώριο, περίγραμμα ή μέγεθος γραμματοσειράς, επεξεργαστείτε χειροκίνητα τον αντιγραμμένο κώδικα.

Πώς δημιουργείται η λίστα κλάσεων

Το εργαλείο δημιουργεί τη συμβολοσειρά κλάσεων Tailwind για κάθε στοιχείο με σταθερή σειρά:

1. Κλάση χρώματος κειμένου, αν έχει οριστεί
2. Κλάση χρώματος φόντου, αν έχει οριστεί
3. Κλάσεις εσωτερικού περιθωρίου, εξωτερικού περιθωρίου, περιγράμματος και ακτίνας περιγράμματος
4. Κλάση πλάτους, εκτός αν το πλάτος έχει οριστεί ως «αυτόματο»
5. Οι σταθερές κλάσεις μεγέθους και πάχους γραμματοσειράς
6. Κλάσεις για διαδραστικές καταστάσεις (hover, focus, active), οι οποίες διαφέρουν ανάλογα με τον τύπο στοιχείου
7. Κλάσεις για την απενεργοποιημένη κατάσταση, αν είναι επιλεγμένο το «απενεργοποιημένο»

Τα κουμπιά λαμβάνουν τις hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 και focus:ring-blue-500. Ένα κουμπί που δεν είναι απενεργοποιημένο λαμβάνει επίσης την cursor-pointer. Οι εισαγωγές κειμένου, οι περιοχές κειμένου και οι επιλογές λαμβάνουν αντί αυτών τις focus:outline-none, focus:ring-2, focus:ring-blue-500 και focus:border-blue-500. Τα ίχνη πλοήγησης δεν λαμβάνουν καμία από αυτές τις διαδραστικές κλάσεις και η απενεργοποιημένη κατάσταση δεν εφαρμόζεται ποτέ σε ίχνος πλοήγησης, επειδή μια λίστα πλοήγησης δεν μπορεί να απενεργοποιηθεί.

Παράδειγμα: κουμπί

Με τις προεπιλεγμένες ρυθμίσεις (λευκό κείμενο, μπλε-500 φόντο, μεσαίο εσωτερικό περιθώριο, στρογγυλεμένες γωνίες), το εργαλείο παράγει:

Παράδειγμα: εισαγωγή κειμένου

Με γκρι κείμενο, λευκό φόντο, μικρό εσωτερικό περιθώριο, μεγάλη ακτίνα περιγράμματος, πλήρες πλάτος και επιλεγμένο το «απαιτείται»:

Παράδειγμα: περιοχή κειμένου και επιλογή

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

Μια επιλογή με τα ίδια χρώματα και την ίδια απόσταση με το παραπάνω παράδειγμα εισαγωγής κειμένου και με τρεις επιλογές:

Παράδειγμα: ίχνος πλοήγησης

Οι σύνδεσμοι και τα διαχωριστικά των ιχνών πλοήγησης χρησιμοποιούν πάντα σταθερές κλάσεις (hover:text-blue-600 στους συνδέσμους, mx-2 text-gray-400 στο διαχωριστικό «/»). Μόνο η εξωτερική λίστα λαμβάνει τις πέντε κοινές ιδιότητες μορφοποίησης. Με γκρι κείμενο και χωρίς εσωτερικό περιθώριο ή στρογγυλοποίηση:

Προσαρμοζόμενη προεπισκόπηση έναντι προσαρμοζόμενων κλάσεων

Το εργαλείο διαθέτει έναν έλεγχο «Προσαρμοζόμενη προβολή» με τρεις επιλογές: κινητό, tablet και υπολογιστής. Η εναλλαγή μεταξύ τους αλλάζει μόνο το πλάτος του πλαισίου προεπισκόπησης, ώστε ο χρήστης να βλέπει κατά προσέγγιση πώς θα εμφανιζόταν ένα στοιχείο σε στενότερη οθόνη. Δεν προσθέτει κανένα πρόθεμα σημείου διακοπής Tailwind, όπως sm:, md:, lg: ή xl:, στον κώδικα που δημιουργείται. Η έξοδος JSX είναι ίδια ανεξάρτητα από την επιλεγμένη προσαρμοζόμενη προβολή. Όποιος χρειάζεται ένα στοιχείο να εμφανίζεται διαφορετικά σε διαφορετικά πλάτη οθόνης πρέπει να προσθέσει ο ίδιος αυτές τις κλάσεις σημείων διακοπής στον αντιγραμμένο κώδικα.

Πώς προσθέτετε Tailwind CSS σε ένα έργο React

1. Εγκαταστήστε τα πακέτα: npm install -D tailwindcss postcss autoprefixer
2. Ρυθμίστε τα αρχεία διαμόρφωσης: npx tailwindcss init -p
3. Καταχωρίστε τα αρχεία πηγαίου κώδικα του έργου στο tailwind.config.js, στην ενότητα content
4. Προσθέστε τις τρεις οδηγίες Tailwind στο κύριο αρχείο CSS: @tailwind base; @tailwind components; @tailwind utilities;
5. Επικολλήστε ένα στοιχείο που δημιουργήθηκε σε ένα αρχείο React

Συχνές ερωτήσεις

Τι κάνει το React Tailwind Component Builder; Δημιουργεί ένα στοιχείο React με μορφοποίηση και τις αντίστοιχες κλάσεις Tailwind CSS και εμφανίζει ζωντανή προεπισκόπηση ενώ ο χρήστης προσαρμόζει τις ρυθμίσεις.

Προσθέτει αυτόματα το εργαλείο κλάσεις αποκριτικών σημείων διακοπής όπως οι sm: ή md:; Όχι. Το στοιχείο ελέγχου κινητού/tablet/υπολογιστή αλλάζει μόνο το μέγεθος του πλαισίου προεπισκόπησης. Ο εξαγόμενος κώδικας δεν περιέχει κλάσεις sm:, md:, lg: ή xl:· αυτές πρέπει να προστεθούν χειροκίνητα, αν χρειάζεται.

Μπορώ να αλλάξω το εξωτερικό περιθώριο, το στυλ περιγράμματος ή το μέγεθος γραμματοσειράς; Όχι μέσω της διεπαφής. Κάθε στοιχείο που δημιουργείται χρησιμοποιεί το ίδιο σταθερό εξωτερικό περιθώριο (m-0), περίγραμμα (border border-transparent), μέγεθος γραμματοσειράς (text-base) και πάχος γραμματοσειράς (font-medium). Αλλάξτε τα επεξεργαζόμενοι απευθείας τον αντιγραμμένο κώδικα.

Αποθηκεύει το εργαλείο τα στοιχεία μου; Όχι. Δεν υπάρχει λειτουργία αποθήκευσης. Αντιγράψτε τον κώδικα που δημιουργήθηκε και αποθηκεύστε τον στα αρχεία του ίδιου του έργου.

Δημιουργεί TypeScript; Το εργαλείο παράγει JSX (σύνταξη JavaScript). Η έξοδος είναι απλή σήμανση JSX, επομένως μπορεί να επικολληθεί σε αρχείο .tsx χωρίς αλλαγές, αν και δεν δημιουργούνται ορισμοί τύπων.

Είναι δωρεάν η χρήση του εργαλείου; Ναι. Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησης, χωρίς λογαριασμό και χωρίς να αποστέλλεται αίτημα σε διακομιστή.

Λειτουργεί με τα Next.js, Gatsby ή άλλα πλαίσια React; Ναι. Ο κώδικας που δημιουργείται είναι απλό JSX με κλάσεις Tailwind, επομένως λειτουργεί σε οποιοδήποτε πλαίσιο που βασίζεται στο React και έχει ρυθμισμένο το Tailwind CSS.