La création d’une application React pour un public mondial doit inclure l’adaptation du contenu aux contextes locaux. Découvrez comment la localisation KendoReact peut vous aider.
Créer des applications pour un public mondial signifie bien plus que simplement traduire du texte ; cela implique également d’adapter le contenu aux contextes locaux. Il s’agit d’adapter les mises en page, les formats de date et les conventions numériques pour créer une expérience native pour les utilisateurs, quelle que soit leur localisation. Ce processus est connu sous le nom localisationet il joue un rôle crucial dans la création de logiciels inclusifs et conviviaux.
Dans cet article, nous explorerons les progrès Localisation de KendoReact et découvrez comment il simplifie l’internationalisation en fournissant des capacités de traduction de messages et une prise en charge de droite à gauche (RTL) pour vos applications React.
Le KendoReact Localisation le paquet fait partie de KendoRéagirune bibliothèque d’interface utilisateur de niveau entreprise avec plus de 120 composants pour créer des applications raffinées et performantes.
Localisation de KendoReact
Le package de localisation KendoReact gère deux aspects principaux de l’internationalisation : la traduction des messages des composants et la prise en charge de l’orientation du texte de droite à gauche. Cela signifie que nous pouvons créer des applications qui fonctionnent naturellement pour les utilisateurs, qu’ils lisent l’anglais, l’arabe ou toute autre langue que notre application doit prendre en charge.
Prenons un exemple pour voir comment nous pouvons créer un Grille de réaction composant parlant couramment plusieurs langues.
Traduction des messages des composants
Tout d’abord, nous devons fournir les messages de traduction pour les langues que nous souhaitons prendre en charge. La bibliothèque KendoReact facilite cela avec le chargerMessages fonction, qui associe un ensemble de messages à un paramètre régional spécifique.
Ces messages sont de simples paires clé-valeur. Pour l’espagnol et l’arabe, les fichiers de messages ressembleraient à ceci :
export default {
'kendo.grid.noRecords': 'No hay registros disponibles',
};
export default {
'kendo.grid.noRecords': 'لا توجد سجلات متاحة',
};
Dans l’exemple ci-dessous, nous allons configurer une grille pouvant basculer entre l’anglais, l’espagnol et l’arabe. Nous utiliserons un Réagir à la liste déroulante pour permettre à l’utilisateur de sélectionner une langue, et le Grid mettra à jour son contenu et ses messages internes (comme les contrôles de pagination) en conséquence.
import * as React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import {
IntlProvider,
LocalizationProvider,
loadMessages,
} from '@progress/kendo-react-intl';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import esMessages from './messages-es';
import arMessages from './messages-ar';
loadMessages(esMessages, 'es-ES');
loadMessages(arMessages, 'ar-SA');
const columnTitles = {
'en-US': {
ProductID: 'ID',
ProductName: 'Product Name',
UnitPrice: 'Unit Price',
},
'es-ES': {
ProductID: 'ID',
ProductName: 'Nombre del producto',
UnitPrice: 'Precio unitario',
},
'ar-SA': {
ProductID: 'معرف المنتج',
ProductName: 'اسم المنتج',
UnitPrice: 'سعر الوحدة',
},
};
const App = () => {
const [locale, setLocale] = React.useState('en-US');
const handleLocaleChange = (event) => {
setLocale(event.target.value.value);
};
const languageOptions = [
{ text: 'English', value: 'en-US' },
{ text: 'Español', value: 'es-ES' },
{ text: 'العربية', value: 'ar-SA' },
];
const titles = columnTitles[locale] || columnTitles['en-US'];
return (
<div>
<div className="example-config">
<p>Select Language:</p>
<DropDownList
data={languageOptions}
textField="text"
dataItemKey="value"
value={languageOptions.find((l) => l.value === locale)}
onChange={handleLocaleChange}
/>
</div>
<LocalizationProvider language={locale}>
<IntlProvider locale={locale}>
<Grid style={{ height: '420px' }} data={[]}>
<Column
field="ProductID"
title={titles.ProductID}
filterable={false}
width="100px"
/>
<Column field="ProductName" title={titles.ProductName} />
<Column
field="UnitPrice"
title={titles.UnitPrice}
filter="numeric"
format="{0:c}"
/>
</Grid>
</IntlProvider>
</LocalizationProvider>
</div>
);
};
export default App;
Dans ce code, nous importons d’abord loadMessages, LocalizationProvider et IntlProvideret nous chargeons nos fichiers de messages en espagnol et en arabe. Le locale est stocké dans l’état React, qui est mis à jour par le DropDownList. Le Grid et son Column les composants sont enveloppés dans LocalizationProvider et IntlProviderqui transmettent les paramètres régionaux sélectionnés.
Cela traduit automatiquement les messages intégrés, comme ceux des menus de filtrage ou du téléavertisseur. Pour le texte personnalisé, comme les titres de nos colonnes, nous utilisons un simple columnTitles objet pour rechercher la traduction correcte en fonction de la version actuelle locale.
Avec cela, nous obtenons un sélecteur de langue qui nous permet de basculer entre l’anglais, l’espagnol et l’arabe.
Prise en charge de droite à gauche (RTL)
Certaines langues, comme l’arabe, se lisent de droite à gauche. Une stratégie de localisation appropriée doit également adapter la présentation de l’application pour s’adapter à ces utilisateurs. Les composants KendoReact ont un support RTL intégré, qui peut être activé en ajoutant un dir="rtl" attribut à un élément parent.
Prolongons notre exemple précédent. Lorsque l’utilisateur sélectionne l’arabe ('ar-SA'), nous allons non seulement traduire le texte, mais également faire passer l’interface utilisateur en mode RTL.
import * as React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import {
IntlProvider,
LocalizationProvider,
loadMessages,
} from '@progress/kendo-react-intl';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import esMessages from './messages-es';
import arMessages from './messages-ar';
loadMessages(esMessages, 'es-ES');
loadMessages(arMessages, 'ar-SA');
const columnTitles = {
'en-US': {
ProductID: 'ID',
ProductName: 'Product Name',
UnitPrice: 'Unit Price',
},
'es-ES': {
ProductID: 'ID',
ProductName: 'Nombre del producto',
UnitPrice: 'Precio unitario',
},
'ar-SA': {
ProductID: 'معرف المنتج',
ProductName: 'اسم المنتج',
UnitPrice: 'سعر الوحدة',
},
};
const App = () => {
const [locale, setLocale] = React.useState('en-US');
const isRtl = locale === 'ar-SA';
const handleLocaleChange = (event) => {
setLocale(event.target.value.value);
};
const languageOptions = [
{ text: 'English', value: 'en-US' },
{ text: 'Español', value: 'es-ES' },
{ text: 'العربية', value: 'ar-SA' },
];
const titles = columnTitles[locale] || columnTitles['en-US'];
return (
<div dir={isRtl ? 'rtl' : 'ltr'}>
<div className="example-config">
<p>Select Language:</p>
<DropDownList
data={languageOptions}
textField="text"
dataItemKey="value"
value={languageOptions.find((l) => l.value === locale)}
onChange={handleLocaleChange}
/>
</div>
<LocalizationProvider language={locale}>
<IntlProvider locale={locale}>
<Grid style={{ height: '420px' }} data={[]}>
<Column
field="ProductID"
title={titles.ProductID}
filterable={false}
width="100px"
/>
<Column field="ProductName" title={titles.ProductName} />
<Column
field="UnitPrice"
title={titles.UnitPrice}
filter="numeric"
format="{0:c}"
/>
</Grid>
</IntlProvider>
</LocalizationProvider>
</div>
);
};
export default App;
Le changement clé ici est le dir attribut à la racine div. Nous vérifions si le courant locale est 'ar-SA' et définir dir à 'rtl' si c’est le cas. Ce simple changement est tout ce qui est nécessaire pour que les composants KendoReact inversent leur disposition, de sorte que l’ordre des colonnes, l’alignement du texte et les contrôles des composants soient tous correctement affichés pour les lecteurs de droite à gauche.
Conclure
Le package de localisation KendoReact offre une solution complète et conviviale pour adapter vos applications à un public mondial. En combinant la traduction des messages avec une prise en charge transparente de droite à gauche, nous pouvons créer des interfaces qui semblent naturelles et intuitives pour les utilisateurs de n’importe quelle région.
Pour plus de détails sur le package de localisation KendoReact, y compris les options de configuration supplémentaires et la liste complète des clés de message disponibles, assurez-vous de consulter le documentation officielle.
Et si vous souhaitez l’essayer vous-même, téléchargez l’essai gratuit de 30 jours.
Source link