Création d’un style de texte cohérent avec la typographie KendoReact

Un style de texte cohérent est crucial pour maintenir la lisibilité et l’attrait esthétique d’une application. Il permet au texte d’une application d’être lisible, accessible et visuellement harmonieux dans les différentes sections.

Dans cet article, nous verrons comment utiliser Progress KendoReact. Typographie composant pour créer un style de texte cohérent dans nos applications React.

Le composant de typographie KendoReact

Le KendoRéagir Le composant Typographie fournit un ensemble complet d’éléments de texte, notamment des titres, des paragraphes et des extraits de code pouvant adhérer aux principes de conception du thème d’une application.

Le composant Typographie est disponible via le @progress/kendo-react-common package et peut être importé directement dans un projet React.

import { Typography } from '@progress/kendo-react-common';

Pour appliquer le composant Typographie, nous pouvons choisir parmi les différents sous-composants qu’il prend en charge, tels que h1, h2, p, code et d’autres. Voici un exemple de rendu de différents titres d’en-tête à l’aide du composant Typographie.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.h1>Headline 1</Typography.h1>
      <Typography.h2>Headline 2</Typography.h2>
      <Typography.h3>Headline 3</Typography.h3>
      <Typography.h4>Headline 4</Typography.h4>
      <Typography.h5>Headline 5</Typography.h5>
      <Typography.h6>Headline 6</Typography.h6>
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

Le code ci-dessus démontre l’utilisation du composant KendoReact Typography pour restituer divers titres d’en-tête, allant de h1 à h6. Chaque niveau d’en-tête est stylisé de manière appropriée en fonction des styles prédéfinis du thème KendoReact utilisé, conservant ainsi la hiérarchie visuelle et la cohérence dans la typographie de l’application.

Alternativement, nous pouvons restituer un paragraphe en utilisant le Typography.p sous-composant. Cela nous permet d’appliquer les mêmes principes de style cohérents au texte des paragraphes :

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.p>
        I am a paragraph. This text is styled using the KendoReact Typography
        component, demonstrating how easy it is to apply consistent text styling
        throughout your React application.
      </Typography.p>
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

Ce qui précède rendra un paragraphe à l’aide du composant Typographie.

Pour afficher des extraits de code dans notre texte, le Typography.code et Typography.pre Les sous-composants offrent un moyen propre et cohérent d’afficher respectivement les éléments de code en ligne et en bloc.

Le Typography.code Le sous-composant est idéal pour afficher de courts extraits de code en ligne dans un paragraphe ou une phrase.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.p>
        To install the package, run the{" "}
        <Typography.code>npm install</Typography.code> command in your terminal.
      </Typography.p>
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

L’extrait de code ci-dessus montre comment Typography.code peut être utilisé dans un paragraphe pour mettre en évidence le npm install commande en tant qu’élément de code, ce qui la distingue par son importance.

Pour des exemples de code plus volumineux ou des extraits de code qui doivent être affichés sous forme de bloc, le Typography.pre Le sous-composant fournit une option de style appropriée. Cela présente le code de manière formatée et facile à lire, en préservant les espaces et l’indentation.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.pre
        dangerouslySetInnerHTML={{
          __html: `function greet(message) {
  console.log(message);
}
greet('Hello, world!')`,
        }}
      />
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

Noter que dangerouslySetInnerHTML est une propriété React qui vous permet de définir du HTML directement depuis React. Il doit être utilisé avec prudence afin de réduire le risque de vulnérabilités de script intersite (XSS) lors du rendu du contenu généré par l’utilisateur.

L’exemple de code ci-dessus utilise le Typography.pre sous-composant pour restituer le bloc de code tout en conservant le formatage, l’indentation et les sauts de ligne.

Le composant KendoReact Typography aide non seulement à restituer les éléments de texte, mais offre également des options de personnalisation via divers accessoires. Par exemple, le textTransform prop nous permet de définir la transformation du texte de l’élément soit uppercase, lowercase ou capitalize.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.h3 textTransform="lowercase">
        This is written in lowercase
      </Typography.h3>
      <Typography.h3 textTransform="uppercase">
        This is written in uppercase
      </Typography.h3>
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

Le code ci-dessus affichera les en-têtes affichés dans les transformations minuscules et majuscules.

Voici un exemple de rendu de texte dans différentes couleurs à l’aide de l’option themeColor propriété pour spécifier la couleur du texte à certaines valeurs possibles.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { Typography } from "@progress/kendo-react-common";

const App = () => {
  return (
    <React.Fragment>
      <Typography.h3 themeColor="inherit">Inherit text color</Typography.h3>
      <Typography.h3 themeColor="primary">Primary text color</Typography.h3>
      <Typography.h3 themeColor="info">Info text color</Typography.h3>
      <Typography.h3 themeColor="success">Success text color</Typography.h3>
      <Typography.h3 themeColor="error">Error text color</Typography.h3>
      <Typography.h3 themeColor="warning">Warning text color</Typography.h3>
      <Typography.h3 themeColor="light">Light text color</Typography.h3>
    </React.Fragment>
  );
};

const container = document.querySelector("my-app");
const root = createRoot(container);
root.render(<App />);

Avec ce qui précède, nous verrons chacun des titres rendus dans le thème inherit, primary, info, success, error, warning et light couleurs. Gardez à l’esprit que la couleur spécifique appliquée dépend du Thème global de KendoReact sélectionné.

Pour obtenir la liste de toutes les propriétés de personnalisation acceptées par le composant Typography, reportez-vous au Documentation de l’API TypographyProps.

Conclure

Le composant Typographie de KendoReact nous permet de maintenir un style de texte cohérent dans notre application en gardant tous les éléments de texte visuellement harmonieux et accessibles. En tirant parti de sa suite complète de sous-composants et d’options de personnalisation, les développeurs peuvent créer une stratégie de style de texte cohérente qui améliore l’expérience utilisateur et s’aligne sur les principes de conception de leur application.

Pour plus de détails, assurez-vous de consulter le composant officiel Documentation!