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.
[Class-component]
import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
// 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 { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
// 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;
[Functional-component]
import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
// Load French culture for Dialog close button tooltip text
L10n.load({
'fr-BE': {
'dialog': {
'close': "Fermer"
}
}
});
function App() {
function content() {
return (<div>
Dialogue avec la culture française
</div>);
}
return (<div className="App" id='dialog-target'>
<DialogComponent width='250px' locale='fr-BE' content={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";
// Load French culture for Dialog close button tooltip text
L10n.load({
'fr-BE': {
'dialog': {
'close': "Fermer"
}
}
});
function App() {
function content(): JSX.Element {
return (
<div>
Dialogue avec la culture française
</div>
)
}
return (
<div className="App" id='dialog-target'>
<DialogComponent width='250px' locale= 'fr-BE' content={content} header='Dialog' closeOnEscape={false} showCloseIcon={true} target='#dialog-target'/>
</div>
);
}
export default App;