Construire un système de conception avec Kendo UI

Découvrez comment créer un système de conception à l'aide de Progress Sass Theme Builder et de KendoReact pour des composants, des couleurs et des thèmes cohérents dans l'ensemble de votre projet. l'application doit intégrer une sorte de système de conception. Dans ce didacticiel, nous expliquerons ce qu'est un système de conception, pourquoi il est utile et comment en incorporer un à l'aide de l'interface utilisateur Kendo.

Qu'est-ce qu'un système de conception ?

En termes simples, un système de conception est un ensemble de principes , des directives et des règles contenant des informations sur l'apparence et le comportement des différents éléments et composants de votre application. Par exemple, un système de conception peut couvrir des éléments tels que :

• Famille de polices et dimensionnement pour la typographie, tels que les titres, les paragraphes de corps ou les étiquettes
• Couleurs de la marque et de la palette
• Icônes
• Comportement et aspect des composants, tels que en tant que champs de formulaire
• Et plus encore

L'intérêt d'un système de conception est que, quel que soit le nombre de développeurs ou d'équipes travaillant sur un produit, il aura une interface utilisateur et un comportement cohérents, car tous les membres utilisent le même directives et composants. Des questions comme « Quelle couleur dois-je utiliser ? » ou « Quelle taille de police ce titre doit-il être ? » sont déjà répondues, et les développeurs n'ont qu'à en choisir un dans le système de conception. Kendo UI ?

Kendo UI est une collection complète de composants d'interface utilisateur JavaScript qui peuvent aider à accélérer le processus de création d'applications Web. Il contient des composants prêts à l'emploi et flexibles pour de nombreux cas d'utilisation différents, tels que des formulaires, des éditeurs, des graphiques, des mises en page, des fenêtres contextuelles, etc. Kendo UI propose des bibliothèques de kits pour jQuery, Angular, React et Vue, donc même si vos équipes utilisent des frameworks différents, elles peuvent toujours créer des produits avec une interface utilisateur et un comportement cohérents.

Comment personnaliser et créer un thème Kendo ?

• Thème par défaut – disponible via le module npm @progress/kendo-theme-default
• Thème Boostrap – disponible via le module npm @progress/kendo-theme-bootstrap
• Thème des matériaux – disponible via le module npm @progress/kendo-theme-material

Tous fournissent de superbes éléments d'interface utilisateur prêts à l'emploi. Cependant, si vous souhaitez personnaliser ces thèmes ou même créer les vôtres, Kendo UI vous permet de le faire. Vous pouvez trouver la documentation sur les styles de thèmes respectifs sous ces liens :

La section sur les styles décrit comment installer, utiliser, personnaliser les thèmes par défaut ou même créer les vôtres. Tout d'abord, nous verrons comment créer votre propre thème personnalisé.

Progress propose également des outils de conception au développement supplémentaires : Kits Figma et Unite UX. Si vous souhaitez en savoir plus à leur sujet, ce article de blog constitue une belle introduction.

Progress Sass Theme Builder

Une façon de créer votre propre thème consiste à utiliser la page Progress Sass Theme Builder.

Après avoir choisi l'un des produits disponibles, par ex. Kendo React, vous avez le choix entre deux options : « Démarrer le thème » ou « Importer le thème ». Si vous avez un thème Kendo préexistant, vous pouvez importer un fichier SCSS avec des variables spécifiques à Kendo. Si c'est votre première fois, vous pouvez choisir l'option "Démarrer le thème".

Vous devrez sélectionner le thème de base, qui sera utilisé comme point de départ. Vous pouvez choisir entre « Par défaut », « Bootstrap » et « Matériel ». Après cela, vous pouvez spécifier les composants que vous souhaitez styliser. Si vous souhaitez que votre configuration affecte tous les composants, sélectionnez-les tous, puis cliquez sur le bouton « Créer ».

Après avoir créé la configuration initiale du thème, vous devriez voir une page avec tous les composants, ainsi que la barre latérale contenant une liste de entrées pour la configuration des couleurs de la marque et des composants. Le gros avantage du générateur de thème est le fait que vous pouvez voir à quoi ressembleront tous les composants avec les couleurs de thème choisies. , survol, sélectionné, graphique. L'aperçu du thème répertorie divers composants et en affiche un aperçu, y compris les boutons, les listes déroulantes, les entrées. » title= »theme builder »/>

De plus, si vous regardez attentivement sur le côté gauche, vous verrez qu'il y a aussi un panneau avec une couleur prédéfinie des nuances parmi lesquelles vous pouvez choisir un thème.

 » title= »color swatches »/>[19659015]Si vous n'aimez aucune de ces couleurs, vous pouvez fournir vos propres couleurs.

Lorsque vous êtes prêt, vous pouvez cliquer sur le bouton Télécharger, que vous trouverez dans le coin supérieur droit de la page. Il téléchargera un fichier Zip contenant deux fichiers :

• VotreNomThème.css
• variables.scss

Si vous souhaitez modifier votre thème par la suite, vous pouvez modifier les variables directement. Cependant, si vous souhaitez utiliser le même générateur de thème visuel, vous pouvez le faire en important le fichier variables.scss que vous avez téléchargé précédemment. C'est aussi simple que cela.

Modification du thème Kendo via les variables SCSS

L'interface utilisateur Kendo fournit des capacités de personnalisation du thème via les variables SCSS. Pour cet exemple, je vais utiliser le kit KendoReact. Ci-dessous, vous pouvez trouver un exemple interactif présentant des en-têtes personnalisés, des boutons et un formulaire utilisant KendoReact.

Si vous souhaitez l'essayer localement, vous pouvez cloner ce dépôtou vous pouvez créer un nouveau Projet React.

Vous devrez installer sass ainsi que l'un des trois thèmes fournis par Kendo UI. Pour installer le thème par défaut, vous pouvez exécuter npm install sass @progress/kendo-theme-default ou yarn add sass @progress/kendo-theme-default. Si vous préférez Bootstrap ou Material, remplacez simplement @progress/kendo-theme-default par les packages respectifs.

Les autres packages que vous pouvez installer sont :

• @progress/kendo-react-buttons.
• @progress/kendo-react-form
• @progress/kendo-react-inputs
• @progress/kendo-react-labels

Dans le fichier App.jsvous pouvez ajouter ce code :

src/App.js

import React from "react";
import { Button } de "@progress/kendo-react-buttons";
import { Formulaire, Champ, FormElement } from "@progress/kendo-react-form";
import { Erreur } from[19659050]"@progress/kendo-react-labels";
import { Entrée } de[19659050]"@progress/kendo-react-inputs";

const emailRegex = new RegExp(/S+@S+ .S+/);
const emailValidator = valeur =>
  emailRegex.test(value) ? "" : "Veuillez entrer un email valide.";[19659052]const EmailInput = fieldRenderProps => {
  const { validationMessage, visité,
 ]...autres } = fieldRenderProps;
  return (
    <div>
      <Entrée {...autres} />
      {visité && validationMessage &&[19659108][Erreur>{validationMessage}</Error>} </ div> ); }; export default fonction App( ) { const handleSubmit = dataItem => alert(JSON.stringify( dataItem, null, 2)); return ( <div[19659051]> <fieldset className="k-mb-4"> <légende>En-têtes</légende> <h1 className="k -h1">Typographie</h1> <h2 className=[19659051]"k-h2">Typographie</h2> <h3 className[19659104]="k-h3">Typographie</h3> <h4 className=" k-h4">Typographie</h4> <h5 className="k-h5">Typographie</h5> <h6[19659145]className="k-h6">Typography</h6>[19659101]</fieldset> <fieldset className="k-mb-4"[19659051]> <légende>Boutons</légende> <div className ="k-mb-4">[19659151] <Bouton className="k-mr-4">Par défaut< /Bouton> <Bouton className="k-mr-4" désactivé> Par défaut désactivé </Bouton> </div> <div> <Bouton className="k-mr-4" primary> Primaire </Bouton> <Bouton primaire désactivé> Principal désactivé </Bouton> </div> </fieldset> <fieldset  className="k-mb-4"> <légende>Form </légende> <Form onSubmit={handleSubmit} render={formRenderProps => ( <FormElement style={{ maxWidth  : 650 }}> <fieldset className={"k-form-fieldset"}> <legend className={"k-form-legend"}> Veuillez remplir  les champs : </légende> <div className="mb-3"> <Champ nom={"prénom"} composant={Entrée} libellé={"Prénom"} /> </div> <div className="mb-3"> <Champ nom={"nom"} composant={Entrée} label={"Nom"} /> </div> <div className="mb-3"> <Champ nom={"email"} tapez={"e-mail"} composant={EmailInput} libellé={"E-mail"} validateur={emailValidateur} /> </div> </fieldset> <div className="k-form-buttons"> <bouton type={"soumettre"} className="k-button" disabled={!formRenderProps.allowSubmit} > Soumettre </bouton> </div> </FormElement> )} /> </fieldset> </div> ); } 

Cela créera trois sections. Le premier contiendra des titres, le bouton du milieu et le dernier un formulaire.

Nous devons également inclure le thème et ajouter un fichier .scssafin que nous puissions ajouter nos propres remplacements de style . Pour cela, créons un nouveau fichier appelé kendo-theme.scss.

src/styles/kendo-theme.scss

@import "~@progress/kendo -theme-default/dist/all.scss";

En plus de cela, nous devons également importer le fichier kendo-theme.scss dans le index.js fichier.

src/index.js

import React from "react";
import ReactDOM from  "react-dom";
import "./styles/kendo-theme.scss";
import App from "./App ";

ReactDOM.render(<App />, document.getElementById([19659289]"root"));

C'est tout pour l'installation. L'image ci-dessous montre ce que vous devriez voir après avoir exécuté le projet.

Maintenant, ajoutons quelques remplacements. Pour personnaliser l'interface utilisateur de Kendo, nous pouvons créer des variables SCSS avec nos propres valeurs. Pour cela, modifions le fichier kendo-theme.scss.

src/styles/kendo-theme.scss

$font-size:[19659136]18px;
$primary: #44e713;
$border-radius: 5px;


$h1-font-size: 30px;
$h2-font-size : 26px;
$h3-font-size: 22px;
$h4-font-size : 18px;
$h5-font-size: 18px;
 $h6-font-size: 18px;



$button-border-width: 3px;
$button-font-size: 14px;
$button-pa dding-x: 12px;
$button-padding-y: 8px; 

@import "~@progress/kendo-theme-default/dist/all.scss";

Les variables doivent être placées avant d'importer le thème. Comme vous pouvez le voir, nous avons fourni nos propres valeurs pour la taille de police de base du texte et des en-têtes, et nous avons modifié la couleur primaire, le rayon de la bordure de base, ainsi que quelques propriétés de bouton. Vous trouverez ci-dessous une image de ce à quoi cela devrait ressembler maintenant. Vous pouvez également consulter l'exemple interactif présenté précédemment.

Vous pouvez trouver la liste des variables SCSS disponibles pour Kendo React dans la section Personnalisation.

Résumé

Nous avons couvert ce que un système de conception est, et comment en créer et en personnaliser un en utilisant Sass Theme Builder et KendoReact. Un très bon avantage de l'utilisation d'un kit d'interface utilisateur comme Kendo UI est le fait que vous pouvez réutiliser les composants, les couleurs, les thèmes, etc. dans vos projets. Cela aide également à maintenir une conception et un comportement cohérents, et si vous avez besoin de plus de flexibilité, vous pouvez facilement personnaliser le thème et même créer des composants plus complexes au-dessus de l'interface utilisateur de Kendo.