Morioh
Login
Adam Daniels

Adam Daniels

11 months ago

Comment utiliser Materio pour créer de superbes applications Next.js

Apprenez à utiliser Materio, un modèle d'administration Next.js et React basé sur MUI, pour créer de belles et fonctionnelles applications Next.js.

Construire un site Web à partir de zéro n'est pas toujours l'option la plus appropriée, en raison des contraintes de temps et de ressources. Il est également moins logique de créer des sites à partir de zéro alors qu'il en existe déjà tant qui ont été codés par d'autres développeurs. C'est là que les modèles et les bibliothèques sont utiles. Ces outils vous permettent de simplifier votre travail tout en produisant de grands projets.

L'utilisation de modèles est bénéfique car les modèles ont déjà été testés et débogués par d'autres développeurs, ce qui augmentera la qualité de votre code. Les modèles sont également conçus dans un souci de flexibilité. Ils peuvent être utilisés et modifiés par d'autres développeurs sans entraîner de complications. En plus du code, les modèles offrent aux développeurs des options de personnalisation adaptées aux besoins de leurs projets.

Dans cet article, nous allons explorer l'un de ces modèles pour les applications Web : Materio. Materio est un modèle d'administration Next.js et React basé sur MUI.

Qu'est-ce que Materio ?

Materio est un modèle d'administration basé sur Material UI. Son interface utilisateur est conviviale pour les développeurs, riche en fonctionnalités et hautement personnalisable. Il est disponible dans les versions JavaScript et TypeScript, et est livré avec des fonctionnalités telles que :

  • Menus verticaux et horizontaux
  • 3 tableaux de bord de niche
  • Différentes mises en page de formulaire
  • Disposition des différentes cartes
  • Le composant Recherche rapide
  • Tableaux et grilles
  • Bibliothèques de cartes
  • Une mise en page entièrement responsive
  • Une structure de dossiers organisée
  • Code propre et bien documenté

Materio propose un niveau gratuit et premium. La version gratuite est basique mais fonctionne pour la plupart des applications qui nécessitent un panneau d'administration. La version premium offre plus de fonctionnalités, notamment une plus grande variété de graphiques, de cartes, de mises en page et d'autres composants. Découvrez ce que chaque niveau a à offrir ici .

Installation de Materio

L'installation de Materio est simple. La première étape consiste à sélectionner le modèle Materio sur le site Web de sélection de thèmes. Sur le site Web, vous trouverez deux options pour télécharger le thème : Téléchargement gratuit et Vérifier la version Pro . Pour l'instant, cliquez sur Téléchargement gratuit . Vous devrez vous connecter au site de sélection de thèmes pour télécharger le contenu de leur site Web.

Le fichier téléchargé sera un .zipfichier. Extrayez-le à l'emplacement souhaité. Vous y trouverez d'autres fichiers, notamment LICENSE, README.md et un fichier HTML qui vous redirigera vers la documentation Materio. Vous trouverez également les versions JavaScript et TypeScript du template Materio :

 

Ouvrez la version du répertoire qui vous convient le mieux. Dans le répertoire, vous pouvez installer les dépendances du projet avec votre gestionnaire de packages préféré. Materio recommande aux développeurs d'utiliser Yarn :

yarn install

Après avoir installé les dépendances, vous pouvez exécuter le modèle avec la commande suivante :

yarn run dev

Cela démarrera l'application Next.js à localhost:3000. Voici la page d'accueil du panneau d'administration :

 

Personnaliser votre application Next.js

Dans le src→viewsrépertoire, vous trouverez différents composants pour personnaliser votre application Next.js, tels que des cartes, des tableaux de bord, des mises en page de formulaires, des tableaux, etc. Personnalisons l'un des composants pour afficher des données dynamiques. Nous allons personnaliser le StatisticsCardcomposant pour afficher les statistiques du référentiel GitHub.

Tout d'abord, récupérons les données de la index.jspage. Nous devons importer useStateet useEffectdepuis React :

import { useState, useEffect } from 'react'

Ensuite, dans le Dashboardcomposant, créez un useEffectHook. Nous récupérons les données dans ce crochet :

useEffect(() => {
  const fetchAndSetData = async () => {
    const res = await fetch(
      "https://api.github.com/repos/surajondev/awesome-web3.0", // replace URL with GH repo that you want stats for
    );
    const datajson = await res.json();
    setData(datajson);
  };
  fetchAndSetData();
}, []);

Maintenant, nous allons définir les données, qui sont définies avec le useEffectcrochet ci-dessus :

const [data, setData] = useState()

Après cela, nous devons définir quelques accessoires pourStatisticsCard :

<StatisticsCard
  stars={data.stargazers_count}
  forks={data.forks_count}
  issues={data.open_issues}
/>;

Dans le src→pages→dashboardrépertoire, vous verrez le StatisticsCard.jsfichier, où vous trouverez le salesDatatableau, qui stocke les données. Vous pouvez modifier le nom du tableau pour mieux refléter les données ; Je l'ai changé en data. Avec quelques modifications des propriétés, nous pouvons personnaliser le tableau de données pour mieux l'adapter à la façon dont nous voulons afficher nos données de dépôt GitHub :

const data = [
  {
    stats: '0',
    title: 'Stars',
    color: 'primary',
    icon: <TrendingUp sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    title: 'Forks',
    color: 'success',
    icon: <AccountOutline sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    color: 'warning',
    title: 'Issues',
    icon: <CellphoneLink sx={{ fontSize: '1.75rem' }} />
  }
]

Maintenant, nous devons modifier ces données en fonction des accessoires. Voici des étoiles, des fourches et des problèmes comme accessoires. Nous attribuons ces valeurs au tableau de données :

const StatisticsCard = ({ stars, forks, issues }) => {     // extracting the props
  data[0].stats = stars
  data[1].stats = forks
  data[2].stats = issues

Après avoir modifié les données, nous pouvons facilement voir les changements dans le tableau de bord :

 

Coiffer avec Materio

Le modèle Materio utilise Chakra UI comme cadre CSS pour ajouter des styles. Vous pouvez également personnaliser confortablement le thème Materio pour les éléments suivants :

  • Ajout de points d'arrêt pour personnaliser la réactivité
  • Composants prioritaires, tels que les alertes, les accordéons, les avatars, etc.
  • Modification de la palette de couleurs du site Web
  • Ajouter des ombres
  • Modification de l'espacement des composants
  • Changer la typographie de l'application

Dans les sections suivantes, nous verrons comment personnaliser la palette de couleurs et la typographie de notre application.

Changer la palette de couleurs du panneau d'administration

Dans le src→@core→themerépertoire, vous trouverez la configuration du thème pour tous les composants que nous avons mentionnés précédemment. Vous y trouverez le paletterépertoire contenant le index.jsfichier contenant les informations relatives à la palette de couleurs.

Dans le index.jsfichier, vous trouverez la returnsection, qui contient toutes les couleurs. Ici, vous pouvez apporter des modifications pour refléter la palette de couleurs souhaitée. Nous allons changer certaines couleurs pour refléter un thème différent.

Nous pouvons changer les couleurs principales en un thème clair ou foncé en haut du fichier :

// for customizing the main colors
const lightColor = '128, 0, 128' // colors in RGB
const darkColor = '231, 227, 252' // colors in RGB
const mainColor = mode === 'light' ? lightColor : darkColor

Après cela, vous pouvez modifier la primaryGradientfonction qui renvoie les couleurs primaires du dégradé :

// for customizing gradient
const primaryGradient = () => {
    if (themeColor === 'primary') {
      return '#800080'
    } else if (themeColor === 'secondary') {
      return '#FF5733'
    } else if (themeColor === 'success') {
      return '#00FF00'
    } else if (themeColor === 'error') {
      return '#FF0000'
    } else if (themeColor === 'warning') {
      return '#FFA500'
    } else {
      return '#007FFF'
    }
  }

Ensuite, dans la returnsection, vous trouverez des variantes de couleur telles que primaire, secondaire, succès, etc. Chaque variante a trois propriétés principales : clair, foncé et principal. La couleur principale sera appliquée par défaut. Avec le changement de thème, les couleurs claires et foncées seront appliquées :

primary: {
  light: '#800080',
  main: '#800080',
  dark: '#804BDF',
  contrastText: '#FFF'
},

L'image ci-dessous montre une comparaison du thème Materio avant et après la personnalisation de la palette de couleurs :

 

Apporter des modifications à la typographie

Ensuite, nous pouvons changer la typographie du projet. Dans le répertoire du thème, vous trouverez le répertoire de la typographie. Lorsque vous ouvrez le index.jsfichier, les quatorze variantes de typographie disponibles dans Materio vous seront présentées. En voici quelques-uns :

    h1: {
      fontWeight: 500,
      letterSpacing: '-1.5px',
      color: theme.palette.text.primary
    },
    h2: {
      fontWeight: 500,
      letterSpacing: '-0.5px',
      color: theme.palette.text.primary
    },
    h3: {
      fontWeight: 500,
      letterSpacing: 0,
      color: theme.palette.text.primary
    },

Vous pouvez personnaliser chacune des variantes à votre style - il vous suffit de fournir aux propriétés CSS leur valeur. Ici, vous pouvez également ajouter la famille de polices. Personnalisons la h1balise :

h1: {
  fontWeight: 700,
  letterSpacing: '2px',
  fontFamily: 'Inter',
  lineHeight: '10px',
  color: theme.palette.text.primary
},

Vous pouvez également étendre la typographie en ajoutant plus de variantes :

inputErrorText: {
  fontFamily: 'Inter',
  fontSize: '14px',
  fontStyle: 'normal',
  fontWeight: '400',
  lineHeight: 'normal',
  color: 'red'
}

Désormais, lorsque vous devez ajouter la variante dans un composant, vous pouvez utiliser la syntaxe ci-dessous :

import Typography from '@mui/material/Typography' // importing Typography from MUI
// use variant tag to add the name of the typography variant
<Typography variant='inputErrorText'>
    There is an error.
</Typography>

Une fois l'intégration réussie, vous pouvez l'afficher sur la page Web :

 

C'est ainsi que vous pouvez personnaliser avec succès la typographie dans l'interface utilisateur de Materio. Étant donné que tous les thèmes sont basés sur Chakra UI , avoir des connaissances de base sur ce cadre vous aidera lors de la personnalisation. Sinon, vous pouvez facilement apprendre tout en travaillant, car Chakra UI est intuitive à apprendre.

Conclusion

Materio offre une pléthore de fonctionnalités, notamment des menus verticaux et horizontaux, des tableaux de bord de niche, des mises en page de formulaires, différentes mises en page de cartes, des composants de recherche, des tableaux, des graphiques, etc. Dans ce didacticiel, nous avons appris à quel point il est facile d'installer Materio, comment remplir un composant avec des données personnalisées et comment styliser notre application à l'aide de Chakra UI.

Pour plus de contrôle et de personnalisation, pensez à utiliser Materio pour fournir des pages d'authentification et de connexion au panneau d'administration de votre projet.

Merci d'avoir lu!

Source : https://blog.logrocket.com

#nextjs 

1.05 GEEK