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

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

Τι είναι το Radix UI;

Το Radix UI είναι μια συλλογή από πρωτόγονα, χωρίς στυλ, προσβάσιμα στοιχεία UI για εφαρμογές React. Παρέχει τα δομικά στοιχεία που χρειάζεστε για να δημιουργήσετε το σύστημα σχεδιασμού σας.

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

Ρύθμιση της εφαρμογής React σας

Πρέπει να ρυθμίσετε μια εφαρμογή React για να χρησιμοποιήσετε το Radix UI. Για να το κάνετε αυτό, πρέπει να έχετε το Node.js και

instagram viewer
npm, ο διαχειριστής πακέτων Node, εγκατεστημένο στον υπολογιστή σας.

Με αυτά τα εγκατεστημένα, μπορείτε να δημιουργήσετε μια νέα εφαρμογή React με αυτήν την εντολή τερματικού:

npm init vite

Αυτή η εντολή θα αρχικοποιήσει το Vite. Το Vite είναι ένα εργαλείο γρήγορης κατασκευής που σας επιτρέπει να δημιουργείτε γρήγορα σύγχρονες εφαρμογές Ιστού. Μπορείς χρησιμοποιήστε το Vite για να δημιουργήσετε την εφαρμογή React.

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

Στη συνέχεια, εισαγάγετε τον ριζικό κατάλογο της νέας εφαρμογής σας και εγκαταστήστε τις απαραίτητες εξαρτήσεις:

cd radix-ui-app
npm install

Η εφαρμογή React σας είναι τώρα έτοιμη.

Εγκατάσταση του Radix UI

Το Radix UI είναι μια μεγάλη βιβλιοθήκη συστατικώνy που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε προσβάσιμες εφαρμογές React. Σας επιτρέπει να εγκαταστήσετε κάθε στοιχείο ξεχωριστά ως ξεχωριστό πακέτο. Θα καθορίσετε το όνομα του στοιχείου στην εντολή σας για να το εγκαταστήσετε.

Για παράδειγμα:

npm install @radix-ui/react-dropdown-menu

Αυτό θα εγκαταστήσει το στοιχείο αναπτυσσόμενου μενού Radix UI. Το Radix UI έχει πολλά άλλα στοιχεία που μπορείτε να εγκαταστήσετε ανάλογα με τις ανάγκες σας.

Δημιουργία της εφαρμογής σας χρησιμοποιώντας το Radix UI

Τώρα που έχετε εγκαταστήσει το στοιχείο αναπτυσσόμενου μενού από το Radix UI, μπορείτε να δημιουργήσετε ένα απλό αναπτυσσόμενο μενού χρησιμοποιώντας το Radix UI. Για να το κάνετε αυτό, θα εισαγάγετε πρώτα τα απαραίτητα στοιχεία από το στοιχείο αναπτυσσόμενου μενού Radix UI.

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

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (













New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>




More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}
exportdefault App;

Αυτός ο κώδικας εισάγει όλα τα στοιχεία από το @radix-ui/react-dropdown-menu συσκευασία ως Πτυσώμενο μενού. Στη συνέχεια χρησιμοποιεί αυτά τα στοιχεία για να δημιουργήσει ένα αναπτυσσόμενο μενού μέσα στο div στοιχείο.

ο Πτυσώμενο μενού. Ρίζα είναι το ριζικό στοιχείο του αναπτυσσόμενου μενού. Θα πρέπει να ενσωματώσετε όλα τα άλλα στοιχεία του αναπτυσσόμενου μενού σε αυτό. Μπορείτε να ορίσετε ένα έναυσμα για το αναπτυσσόμενο μενού χρησιμοποιώντας το Πτυσώμενο μενού. Δώσει το έναυσμα για συστατικό. Σε αυτή την περίπτωση, το έναυσμα είναι α κουμπί στοιχείο με το κείμενο "Click Me". Όταν κάνετε κλικ στο κουμπί, θα εμφανιστεί το αναπτυσσόμενο μενού.

Με την Πτυσώμενο μενού. Περιεχόμενο συστατικό, ορίζετε το περιεχόμενο του αναπτυσσόμενου μενού και το Πτυσώμενο μενού. Ομάδα Το στοιχείο αντιπροσωπεύει μια ομάδα σχετικών στοιχείων μενού. Χρησιμοποιείτε το Πτυσώμενο μενού. Είδος στοιχείο για να ορίσετε μεμονωμένα στοιχεία του αναπτυσσόμενου μενού.

Σε αυτό το παράδειγμα, υπάρχουν δύο αναπτυσσόμενο μενού. Στοιχεία ομάδας, καθένα από τα οποία περιέχει ένα μεμονωμένο αναπτυσσόμενο μενού. συστατικό στοιχείου. Αυτά τα στοιχεία είναι όλα τυλιγμένα σε ένα αναπτυσσόμενο μενού. συστατικό περιεχομένου.

Η απόδοση του μπλοκ κώδικα παραπάνω θα τροποποιήσει τη διεπαφή σας ώστε να μοιάζει με αυτό:

Όπως μπορείτε να δείτε, τα αποτελέσματα στερούνται στυλ, επομένως θα χρειαστεί να προσθέσετε το δικό σας CSS στη συνέχεια.

Διαμόρφωση του στυλ των στοιχείων του Radix UI

Ένα από τα πλεονεκτήματα του Radix UI είναι ότι δεν επιβάλλει κανένα στυλ στα στοιχεία σας. Αυτό σημαίνει ότι έχετε τον απόλυτο έλεγχο του στυλ του στοιχείου σας. Μπορείτε να διαμορφώσετε τα στοιχεία σας χρησιμοποιώντας βιβλιοθήκες CSS-in-JS, όπως styled-components και emotion, ή μπορείτε να χρησιμοποιήσετε παραδοσιακό CSS.

Ακολουθεί ένα παράδειγμα του τρόπου με τον οποίο μπορείτε να διαμορφώσετε τα στοιχεία του Radix UI χρησιμοποιώντας το παραδοσιακό CSS:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (





"trigger">


exportdefault App;

Αυτό το παράδειγμα προσθέτει το όνομα τάξης στήριγμα στο κουμπί στοιχείο, το Πτυσώμενο μενού. Δώσει το έναυσμα για, ο Πτυσώμενο μενού. Περιεχόμενο, και το Πτυσώμενο μενού. Είδος συστατικά.

Αφού εφαρμόσετε τις κλάσεις, μπορείτε στη συνέχεια να διαμορφώσετε τα στοιχεία χρησιμοποιώντας CSS:

.button {
padding: 0.7rem 0.8rem;
border: none;
border-radius: 12px;
background-color: #333333;
color: #f2f2f2;
}
.trigger {
border: none;
}


.content {
margin: 1rem;
padding: 0.7rem;
background-color: #FFFFFF;
color: #333333;
border-radius: 7px;
}


.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
}
.item:hover {
background-color: #333333;
color: lightgray;
}

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

Το Radix UI προσφέρει επίσης React Icons, ώστε να μπορείτε να προσθέσετε εικονίδια στην εφαρμογή σας για να την ομορφύνετε λίγο περισσότερο. Ξεκινήστε εγκαθιστώντας το πακέτο εικονιδίων UI Radix:

npm install @radix-ui/react-icons

Μετά την εγκατάσταση του πακέτου, μπορείτε να χρησιμοποιήσετε μερικά από τα εικονίδια του στην εφαρμογή σας.

Για παράδειγμα:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon, PlusIcon } from"@radix-ui/react-icons";
functionApp() {
return (





"trigger">


exportdefault App;

Αυτό το παράδειγμα προσθέτει το Εικονίδιο Menu Hamburger και PlusIcon στην εφαρμογή. Το πρώτο βρίσκεται μέσα σε ένα στοιχείο κουμπιού και το δεύτερο επαυξάνει το πρώτο Αναπτυσσόμενο. Είδος συστατικό.

Στη συνέχεια, ενημερώστε το .είδος τάξη στο αρχείο CSS σας:

.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
display: flex;
gap: 1rem;
}

Τώρα η αίτησή σας θα πρέπει να μοιάζει με αυτό.

Δημιουργία εφαρμογής Quality React με χρήση του Radix UI

Το Radix UI είναι ένα ισχυρό εργαλείο για τη δημιουργία εφαρμογών React. Παρέχει ένα σύνολο χαμηλού επιπέδου, χωρίς στυλ, προσβάσιμα στοιχεία που μπορείτε να χρησιμοποιήσετε ως δομικά στοιχεία για την εφαρμογή σας.

Χρησιμοποιώντας το Radix UI, μπορείτε να εστιάσετε στη λειτουργικότητα της εφαρμογής σας χωρίς να ανησυχείτε για τις υποκείμενες πολυπλοκότητες του UI. Είτε είστε έμπειρος προγραμματιστής είτε αρχάριος, το Radix UI μπορεί να σας βοηθήσει να δημιουργήσετε υψηλής ποιότητας, φιλικές προς το χρήστη διεπαφές ιστού.