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" >
<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] />
Clair
Source link