Docs // Premiers pas // Communauté ReScript Brésil

⚠️ AVIS DE NON- RESPONSABILITÉ : Cette bibliothèque est encore en version bêta, consultez notre feuille de route ici .

Introduction

Ancestor est une suite de composants qui fonctionnent comme des primitives de mise en page pour développer des applications Web, des systèmes de conception et des guides de style de haute qualité axés sur la réactivité.

Quoi et pourquoi?

Chaque projet frontal qui utilise des bibliothèques basées sur des composants comme React est confronté à la même situation : choisissez ou développez une bibliothèque d'interface utilisateur pour développer les interfaces.

Dans certains cas, vous pouvez utiliser des bibliothèques telles que Chakra UI , Material UI ou Ant Design qui fournissent un ensemble de composants stylés (grilles, boutons, entrées, sélections, etc.) et de nombreuses autres fonctions et composants utilitaires pour votre application Web.

Cependant, dans certains cas, l'équipe doit créer son propre système de conception ou guide de style avec un langage de conception, des couleurs, des polices, des boutons, des entrées et d'autres spécifications créées par une équipe de conception. Dans ce cas, l'utilisation d'une bibliothèque telle que Material UI ou Chakra UI n'est peut-être pas le meilleur choix, car cela dépend de nombreuses personnalisations ou modifications pour adapter la bibliothèque aux spécifications de conception.

C'est la raison pour laquelle nous avons créé Ancestor : pour servir de base à votre projet ou à votre système de conception.

Fonctionnalités

Sans style💀

Contrairement aux bibliothèques populaires telles que Material UI, nous ne fournissons pas de composants stylés avec des couleurs, des polices, des bordures, etc. Tous les composants d'Ancestor sont des primitives de mise en page prenant en charge de nombreuses propriétés CSS telles que le rembourrage, la marge, la hauteur, la largeur, etc.

Réactivité💡

Toutes les propriétés des composants d'Ancestor sont réactives, ce qui facilite le développement d'interfaces devant prendre en charge plusieurs appareils. Grâce aux points d' arrêt définis par la bibliothèque, vous pouvez modifier l'apparence d'un composant dans un périphérique ou une taille d'écran spécifique.

Conception cohérente🎨

Nous ne livrons pas de composants stylés, mais nous nous soucions de la cohérence de la conception, en particulier en ce qui concerne l'espacement, les bordures, etc.

Personnalisable⚙️

Toutes les propriétés des composants et paramètres d'Ancestor sont personnalisables : points d'arrêt, espacement, rayon, colonnes de la grille, etc., ce qui facilite la personnalisation et l'adaptation d'Ancestor à votre système de conception ou à votre guide de style.

Installation

Tout d'abord, installez Ancestor en utilisant npm/yarn :

yarn add @rescriptbr/ancestor

Si vous souhaitez utiliser la configuration par défaut, vous devez installer Emotion .

yarn add @emotion/css

Ajoutez le package à

bs-dependencies

bsconfig.json

{
"bs-dependencies": [
  "@rescript/react",
  "@rescriptbr/ancestor"
 ]
}

Utilisation de base

open Ancestor.Default

@react.component
let make = () => {
  <Grid height=[#xs(100.0->#pct)]>
    <Box
      flexDirection=[#xs(#column), #md(#row)]
      p=[xxs(6), md(12), lg(8)]
      position=[#xs(#relative)]
      columns=[#xs(#12), #md(#6)]
    >
      <Box
        flexGrow=[#xs(#num(1.0))]
        width=[#xs(15.0->#rem), #md(20.0->#rem)]
      >
        <Logo />
      </Box>
      <Box flexGrow=[#xs(#num(3.0))] pt=[xxs(4)]>
        <h1>
          {"A place to share knowledge"->React.string}
        </h1>
        <p>
          {"Where good ideas find you."->React.string}
        </p>
      </Box>
      <Box
        position=[#xs(#absolute)]
        bottom=[#xs(-5.0->#rem)]
        left=[#xs(-5.0->#rem)]
      >
          ....
      </Box>
    </Box>
  </Grid>
}

Exemple de ReScript Conduit

Documentation

Consultez la documentation officielle .

Licence

MIT