mirror of https://github.com/abpframework/abp.git
7 changed files with 250 additions and 48 deletions
@ -0,0 +1,143 @@ |
|||||
|
# ASP.NET Core MVC / Razor Pages UI: JavaScript Localization API |
||||
|
|
||||
|
Localization API allows you to reuse the server side localization resources in the client side. |
||||
|
|
||||
|
> This document only explains the JavaScript API. See the [localization document](../../../Localization.md) to understand the ABP localization system. |
||||
|
|
||||
|
## Basic Usage |
||||
|
|
||||
|
`abp.localization.getResource(...)` function is used to get a localization resource: |
||||
|
|
||||
|
````js |
||||
|
var testResource = abp.localization.getResource('Test'); |
||||
|
```` |
||||
|
|
||||
|
Then you can localize a string based on this resource: |
||||
|
|
||||
|
````js |
||||
|
var str = testResource('HelloWorld'); |
||||
|
```` |
||||
|
|
||||
|
`abp.localization.localize(...)` function is a shortcut where you can both specify the text name and the resource name: |
||||
|
|
||||
|
````js |
||||
|
var str = abp.localization.localize('HelloWorld', 'Test'); |
||||
|
```` |
||||
|
|
||||
|
`HelloWorld` is the text to localize, where `Test` is the localization resource name here. |
||||
|
|
||||
|
### Fallback Logic |
||||
|
|
||||
|
If given texts was not localized, localization method returns the given key as the localization result. |
||||
|
|
||||
|
### Default Localization Resource |
||||
|
|
||||
|
If you don't specify the localization resource name, it uses the **default localization resource** defined on the `AbpLocalizationOptions` (see the [localization document](../../../Localization.md)). |
||||
|
|
||||
|
**Example: Using the default localization resource** |
||||
|
|
||||
|
````js |
||||
|
var str = abp.localization.localize('HelloWorld'); //uses the default resource |
||||
|
```` |
||||
|
|
||||
|
### Format Arguments |
||||
|
|
||||
|
If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples: |
||||
|
|
||||
|
````js |
||||
|
var testSource = abp.localization.getResource('Test'); |
||||
|
var str1 = testSource('HelloWelcomeMessage', 'John'); |
||||
|
var str2 = abp.localization.localize('HelloWelcomeMessage', 'Test', 'John'); |
||||
|
```` |
||||
|
|
||||
|
Assuming the `HelloWelcomeMessage` is localized as `Hello {0}, welcome!`, both of the samples above produce the output `Hello John, welcome!`. |
||||
|
|
||||
|
## Other Properties & Methods |
||||
|
|
||||
|
### abp.localization.values |
||||
|
|
||||
|
`abp.localization.values` property stores all the localization resources, keys and their values. |
||||
|
|
||||
|
### abp.localization.isLocalized |
||||
|
|
||||
|
Returns a boolean indicating that if the given text was localized or not. |
||||
|
|
||||
|
**Example** |
||||
|
|
||||
|
````js |
||||
|
abp.localization.isLocalized('ProductName', 'MyResource'); |
||||
|
```` |
||||
|
|
||||
|
Returns `true` if the `ProductName` text was localized for the `MyResource` resource. Otherwise, returns `false`. You can leave the resource name empty to use the default localization resource. |
||||
|
|
||||
|
### abp.localization.defaultResourceName |
||||
|
|
||||
|
`abp.localization.defaultResourceName` can be set to change the default localization resource. You normally don't set this since the ABP Framework automatically sets is based on the server side configuration. |
||||
|
|
||||
|
### abp.localization.currentCulture |
||||
|
|
||||
|
`abp.localization.currentCulture` returns an object to get information about the **currently selected language**. |
||||
|
|
||||
|
An example value of this object is shown below: |
||||
|
|
||||
|
````js |
||||
|
{ |
||||
|
"displayName": "English", |
||||
|
"englishName": "English", |
||||
|
"threeLetterIsoLanguageName": "eng", |
||||
|
"twoLetterIsoLanguageName": "en", |
||||
|
"isRightToLeft": false, |
||||
|
"cultureName": "en", |
||||
|
"name": "en", |
||||
|
"nativeName": "English", |
||||
|
"dateTimeFormat": { |
||||
|
"calendarAlgorithmType": "SolarCalendar", |
||||
|
"dateTimeFormatLong": "dddd, MMMM d, yyyy", |
||||
|
"shortDatePattern": "M/d/yyyy", |
||||
|
"fullDateTimePattern": "dddd, MMMM d, yyyy h:mm:ss tt", |
||||
|
"dateSeparator": "/", |
||||
|
"shortTimePattern": "h:mm tt", |
||||
|
"longTimePattern": "h:mm:ss tt" |
||||
|
} |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
### abp.localization.languages |
||||
|
|
||||
|
Used to get list of all **available languages** in the application. An example value of this object is shown below: |
||||
|
|
||||
|
````js |
||||
|
[ |
||||
|
{ |
||||
|
"cultureName": "en", |
||||
|
"uiCultureName": "en", |
||||
|
"displayName": "English", |
||||
|
"flagIcon": null |
||||
|
}, |
||||
|
{ |
||||
|
"cultureName": "fr", |
||||
|
"uiCultureName": "fr", |
||||
|
"displayName": "Français", |
||||
|
"flagIcon": null |
||||
|
}, |
||||
|
{ |
||||
|
"cultureName": "pt-BR", |
||||
|
"uiCultureName": "pt-BR", |
||||
|
"displayName": "Português", |
||||
|
"flagIcon": null |
||||
|
}, |
||||
|
{ |
||||
|
"cultureName": "tr", |
||||
|
"uiCultureName": "tr", |
||||
|
"displayName": "Türkçe", |
||||
|
"flagIcon": null |
||||
|
}, |
||||
|
{ |
||||
|
"cultureName": "zh-Hans", |
||||
|
"uiCultureName": "zh-Hans", |
||||
|
"displayName": "简体中文", |
||||
|
"flagIcon": null |
||||
|
} |
||||
|
] |
||||
|
```` |
||||
|
|
||||
@ -0,0 +1,45 @@ |
|||||
|
# ASP.NET Core MVC / Razor Pages UI: JavaScript Notify API |
||||
|
|
||||
|
Notify API is used to show toast style, auto disappearing UI notifications to the end user. It is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. |
||||
|
|
||||
|
## Quick Example |
||||
|
|
||||
|
Use `abp.notify.success(...)` function to show a success message: |
||||
|
|
||||
|
````js |
||||
|
abp.notify.success( |
||||
|
'The product "Acme Atom Re-Arranger" has been successfully deleted.', |
||||
|
'Deleted the Product' |
||||
|
); |
||||
|
```` |
||||
|
|
||||
|
A notification message is shown at the bottom right of the page: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## Notification Types |
||||
|
|
||||
|
There are four types of pre-defined notifications; |
||||
|
|
||||
|
* `abp.notify.success(...)` |
||||
|
* `abp.notify.info(...)` |
||||
|
* `abp.notify.warn(...)` |
||||
|
* `abp.notify.error(...)` |
||||
|
|
||||
|
All of the methods above gets the following parameters; |
||||
|
|
||||
|
* `message`: A message (`string`) to show to the user. |
||||
|
* `title`: An optional title (`string`). |
||||
|
* `options`: Additional options to be passed to the underlying library, to the Toastr by default. |
||||
|
|
||||
|
## Toastr Configuration |
||||
|
|
||||
|
The notification API is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. You can see its own configuration options. |
||||
|
|
||||
|
**Example: Show toast messages on the top right of the page** |
||||
|
|
||||
|
````js |
||||
|
toastr.options.positionClass = 'toast-top-right'; |
||||
|
```` |
||||
|
|
||||
|
> ABP sets this option to `toast-bottom-right` by default. You can override it just as shown above. |
||||
@ -0,0 +1,3 @@ |
|||||
|
# Blazor UI: Localization |
||||
|
|
||||
|
Blazor applications can reuse the same `IStringLocalizer<T>` service that is explained in the [localization document](../../Localization.md). All the localization resources and texts available in the server side are usable in the Blazor application. |
||||
|
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in new issue