A
Accueil

UI Kit - Composants

core
coreAEquivalent d’une balise <a>. Envelopper le texte dans une balise <Typography>.
coreExperimentalWeb onlyAnchorHeadingTitre avec ancre navigable au survol — id slug généré automatiquement.
coreBoxLa Box doit être utilisé pour tout contenir, à la manière d‘une <div>. De type View (tamagui), elle permet de définir le tag rendu en web.
coreExperimentalHighlightAffiche du code en typescript, html, json, etc. Composant de type Light (react-syntax-highlighter).
coreImagePermet d'afficher une image de manière responsive que ce soit sur mobile ou desktop. Actuellement l'image ne peut que être fill, il faudrait développer les autres en se basant sur l'élément <img> HTML. https://www.w3schools.com/csS/css3_object-fit.asp
coreLottieLottie animations
corePropsWeb onlyMapCarte interactive (Google Map)
coreMetabaseIntègre une page Metabase en passant l'url
corePagesPermet de définir les valeurs de la balise <head> via Expo router. Doit englober toutes les pages. Permet aussi de rendre la page scrollable via l'attribut `scrollable`. Principalement pour le web.
corePdfViewerAffichage d'un document PDF. Utilise un iframe sur web et WebView sur mobile.
coreExperimentalSectionSection de page. Permet de contenir une section dans un élément adapté aux différentes platformes. Composant de type Box.
coreTypographyLa Typography doit être utilisé pour contenir tous les textes. Composant de type Text (tamagui).
coreVersionAffiche la version de l'app
coreFormEmpêche le clavier de cacher les TextInput sur iOS et permet de quitter le clavier au clique sur l'écran. Doit être utilisé pour contenir tous les fomulaires (pas de <form> en React Native).
ui
uiFigmaAccordionAccordion de type Tamagui.
uiFigmaActionMenuMenu contextuel affichant une liste d'actions sous forme de liste de liens.
uiAutocompleteChamp de saisie avec autocomplétion. Supporte multi-sélection, groupes, création d'options.
uiExperimentalAutocompleteAddressChamp adresse basé sur Autocomplete. Le consommateur fournit les suggestions via onSearchChange/suggestions.
uiFigmaAvatarAvatar avec image ou texte, de différentes tailles. Composant de type Avatar (tamagui).
uiFigmaBadgeDifférents variants de badges. Composant de type Typography.
uiFigmaBreadcrumbsFil d'Ariane construit à partir de la navigation Expo Router. Tous les éléments sauf le dernier (page en cours) sont cliquables.
uiFigmaButtonBoutons de type Pressable (React Native) avec différentes tailles et variants.
uiFigmaCardCarte avec header, section et actions. Composant de type Box.
uiCheckboxCase à cocher avec label, gestion des états et variants de taille.
uiFigmaCounterBadge numérique indiquant un compteur. Utilisé dans les onglets.
uiFigmaDividerSérateur. Composant de type Box - Equivalent <hr/>.
uiWeb onlyDocumentViewerViewer de documents (PDF, Image)
uiWeb onlyDragAndDropFileZone de dépôt de fichiers par glisser-déposer ou clic.
uiEmailFieldChamp email avec label. Clavier email, lowercase automatique.
uiEmailInputInput email brut (sans label). Clavier email, lowercase automatique.
uiFigmaEmpty StateÀ utiliser quand une liste d'objet est vide
uiFileFieldChamp de sélection de fichier avec label et validation MIME.
uiFormControlEléments de construction de champs de saisie (label, input, helper text).
uiFigmaWeb onlyHeaderEn-tête statique avec un logo carré et le titre de l'application à gauche, et un contenu libre à droite.
uiInputButtonAdornmentBouton icône avec bordure latérale, à placer en début ou fin d'input.
uiInputHeadingRegroupe le label et le hint avec le bon espacement vertical.
uiFigmaListItemPermet d’afficher les données d‘une ressource.
uiFigmaPropsLucideIconIcon de la librairie Lucide
uiNumberFieldChamp numérique avec label et boutons +/- sur web.
uiOtpFieldChamp OTP (code à 4 chiffres) avec label.
uiPageHeaderEn-tête de page : fil d’Ariane, puis titre à gauche et actions à droite. Le titre est est H1.
uiPasswordFieldChamp mot de passe avec label et bascule de visibilité.
uiPhoneFieldChamp téléphone avec label.
uiPhoneInputInput téléphone brut (sans label). Clavier numérique téléphone.
uiFigmaPopoverZone cliquable avec ouverture d’un Popover (Tamagui Popover).
uiWeb onlyPriceInputInput montant avec symbole de devise (€). Masque les flèches du champ numérique.
uiProgressBarBarre de progression
uiRadioGroupGroupe de boutons radio avec variantes liste et card.
uiFigmaResourceListPermet d’afficher une liste d'items avec un header et un footer
uiSelectSélecteur mono-valeur natif avec label, hint et états d'erreur/succès.
uiSelectMultipleSélection multiple via une liste déroulante (web) ou un stub natif.
uiFigmaSidebarSideNav est un composant de navigation primaire qui permet d’accéder aux principales sections d’une application. Navigation coté droit, se transformant en menu burger sur mobile. Uitliser <SidebarItem> et <SidebarGroup>.
uiExperimentalSignatureComposant de signature par le doigt ou la souris. Différent entre web et mobile. La hauteur doit être fixe.
uiSwitchInterrupteur avec label, supportant les modes contrôlé et non-contrôlé.
uiFigmaTabsComposant d’onglets (tabs) basé sur tamagui.
uiFigmaTagDifférents tags. Composant de type Typography.
uiTextareaFieldChamp textarea multiline avec label.
uiTextareaInputInput multiline. Étend TextField avec multiline activé par défaut.
uiTextFieldChamp de saisie texte avec label, hint, caption d'erreur et de succès.
uiTextInputArrayListe dynamique de champs texte avec ajout et suppression.
uiFigmaToastToaster Tamagui. Contient le provider global et le hook useToast. Par défaut un toast reste affiché pendant 8 secondes
uiFigmaToolbarBottomNavNavigation bottom de type TabsExpo. A utiliser dans les _layout.
uiFigmaMobile onlyToolbarTopLa ToolbarTop est un composant de navigation et d'action. A utiliser uniquement sur Mobile. Elle dispose de 3 variantes : default, large et compactLarge.
Alveole UI Kit — v0.43.3