Localization library allows to localize the default text content of Dialog. In Dialog, The close button’s tooltip text alone will be localize based on culture.
| Locale key | en-US (default) |
|---|---|
| close | Close |
To load translation object in an application use load function of L10n class.
In the below sample, French culture is set to Dialog and change the close button’s tooltip
text.
import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
// Load French culture for Dialog close button tooltip text
L10n.load({
'fr-BE': {
'dialog': {
'close': "Fermer"
}
}
});
class App extends React.Component<{}, {}> {
public content = (): JSX.Element => {
return (
<div>
Dialogue avec la culture française
</div>
)
}
public render() {
return (
<div className="App" id='dialog-target'>
<DialogComponent
width='250px' locale= 'fr-BE' content={this.content} header='Dialog' closeOnEscape={false}
showCloseIcon={true} target='#dialog-target'/>
</div>
);
}
}
export default App;import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
// Load French culture for Dialog close button tooltip text
L10n.load({
'fr-BE': {
'dialog': {
'close': "Fermer"
}
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.content = () => {
return (<div>
Dialogue avec la culture française
</div>);
};
}
render() {
return (<div className="App" id='dialog-target'>
<DialogComponent width='250px' locale='fr-BE' content={this.content} header='Dialog' closeOnEscape={false} showCloseIcon={true} target='#dialog-target'/>
</div>);
}
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));