Fermer

mai 5, 2020

Comment ajouter des styles personnalisés aux composants KendoReact avec Sass


Lors de l'implémentation de composants d'interface utilisateur tiers, il peut être difficile de faire correspondre la conception de votre application. Découvrez ce que fait l'équipe KendoReact pour faciliter ce processus.

Au sein de l'équipe KendoReact, nous sommes conscients de la difficulté perçue à aligner les composants d'interface utilisateur tiers sur la conception de votre application. Nous avons passé beaucoup de temps à nous assurer que le style de nos composants est aussi simple que possible.

Pour montrer à quel point cela est facile, nous allons créer une application React simple avec le composant KendoReact Form et personnalisez-le via des variables SASS pour qu'il corresponde à notre langage de conception.

Création d'une application

Nous utiliserons create-react-app pour l'échafaudage de projet, en raison de son intégration transparente avec Sass .

Commençons par créer une application vide:

 npx create-react-app custom-kendo-theme  


   cd custom-kendo -theme  


   npm start

Visite localhost: 3000 nous voyons l'écran d'index par défaut create-react-app : [19659011] écran d'accueil create-react-app  » title= »welcom-screen »/>

Passons maintenant au fichier App.js et ajoutons quelques composants de l'interface utilisateur de KendoReact.

S tarting Simple

Dans chaque application Web, vous pouvez voir des composants tels que Button Checkbox et Input puis un certain nombre d'autres selon le type de application que vous créez. Peu importe le nombre de composants d'interface utilisateur que vous utilisez, vous aimeriez probablement avoir un style cohérent en termes de couleurs, d'espacement, de rayon de bordure, etc.

Un composant de formulaire est un exemple simple mais polyvalent qui peut combiner plusieurs composants en son sein . Il est souvent utilisé lors de la création d'applications de tableau de bord, de sites Web de commerce électronique ou d'un CMS, par exemple – et dans chacun de ces cas, vous devrez probablement appliquer une personnalisation et un style personnalisés. Construisons un formulaire simple avec KendoReact et voyons à quoi il ressemble avec le thème de matériel KendoReact .

Les composants KendoReact sont distribués via NPM et sont divisés en packages. Nous ne pouvons importer que ce dont nous avons besoin à partir des différents packages.

Pour l'instant, nous nous en tiendrons à la distribution .css du thème et le changerons avec sass dans le étape suivante.

 importation React de  'react' ;  
  
   import {Button} de  '@ progress / kendo -react-buttons ';  
   import {Form, Field} from ' @ progress / kendo-react-form ';  [19659002]   importation {DateInput} de  '@ progress / kendo-react-dateinputs' ;  
   importation {Input, Checkbox} de [19659019] '@ progress / kendo-react-inputs' ;  
   import {DropDownList} from  '@ progress / kendo-react-dropdowns' ;  
   importez {Editor} depuis  '@ progress / kendo-react-editor' [19659020];  
  
   importation  "./ kendo-theme-custom.scss" ;  
   [19659002]   const App = () => { 
    const handleSubmit = (événement) => {  
 
    console.log (événement);   
   }   
    19659053] retour   (  
    <Formulaire   
    onSubmit = {handleSubmit}   
    render = {(formRenderProps) => (  
    <formulaire   
    onSubmit = {formRenderProps.onSubmit}   
    className = { 'k-form k-form-inline' }  ]  
    style = {{width: 400}}   
   >    
    <fieldset className =  "k-fieldset" >   
   
 Créez un  ] nouveau compte  :
   
    <Champ   
    nom = {[19659019] «titre» }   
    component = {DropDownList}   
    label = { 'Title' }   
    style = {{width:  '100%'  }}   
    data = {[ 'Mr.'  'Mrs.'  'autre' [19659020]]}   
    />   
    <Champ   
   
    name = { 'firstName' }   
    component = {Input}   
  ]   label = { 'Prénom' }   
    style = {{largeur:  '100 % ' }}   
    />   
    <Champ   
    name = { 'lastName' }   
    component = {Input}   
    label = { 'Nom de famille' }   
      style = {{width:  '100%'  }}   
    />   [19659002]    <Champ   
    name = { "email" }   
    type = { "email" }   
    component = {Input}   
    label = { "Email" }   
    validator = {emailValidator}   
    style = {{width:  '100%'  }}   
   ]  />   
    <Champ   
    nom = { "mot de passe" }   
    type = { "mot de passe" }   [19659002]    component = {Input}   
    label = { "Password" }   
    style = {{width:  '100%'  }}   
   [19659082] />   
    <Champ   
    nom = { "naissance-" date "}   
    type = {" Date de naissance "}   
    component = {DateInput}   
    label = { "Date de naissance" }   [19659002]    style = {{width:  '100%'  }}   
    />  ]  
    <Champ   
    name = { 'subscribe' } }   
    component = {Checkbox}   
    label = { "S'inscrire à la newsletter" }   
    style = {{width:  '100%' [19659054]}}   
    defaultValue = { true }   
   [19659082] />   
    <Champ   
    name = { 'subscribe' ' }   
    component = {Editor}   
    label = { "S'inscrire à la newsletter" }   
    style = {{width:  '100%' [19659054]}}   
    defaultValue = { true }   
   [19659082] />   
   
   
       
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link