mirror of
https://github.com/cupcakearmy/svelte-i18n.git
synced 2024-09-28 15:14:45 +02:00
docs: ✏️ update docs
This commit is contained in:
parent
9f352845e1
commit
bd3057ba2d
@ -60,62 +60,45 @@ If the message id literal value is not in the root of the dicitonary, `.` (dots)
|
|||||||
<div>{$_('deep.prop')}</div> <!-- Deep property -->
|
<div>{$_('deep.prop')}</div> <!-- Deep property -->
|
||||||
```
|
```
|
||||||
|
|
||||||
### Formatting utilities
|
### `$time(number: Date, options: MessageObject)`
|
||||||
|
|
||||||
The formatter method also provides some casing methods:
|
`import { time } from 'svelte-i18n'`
|
||||||
|
|
||||||
- `_.upper` - transforms a localized message into uppercase;
|
|
||||||
- `_.lower` - transforms a localized message into lowercase;
|
|
||||||
- `_.capital` - capitalize a localized message;
|
|
||||||
- `_.title` - transforms the message into title case;
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div>{$_.upper('greeting.ask')}</div>
|
|
||||||
<!-- PLEASE TYPE YOUR NAME -->
|
|
||||||
|
|
||||||
<div>{$_.lower('greeting.ask')}</div>
|
|
||||||
<!-- please type your name -->
|
|
||||||
|
|
||||||
<div>{$_.capital('greeting.ask')}</div>
|
|
||||||
<!-- Please type your name -->
|
|
||||||
|
|
||||||
<div>{$_.title('greeting.ask')}</div>
|
|
||||||
<!-- Please Type Your Name -->
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `_.time(time: Date, options: MessageObject): string`
|
|
||||||
|
|
||||||
Formats a date object into a time string with the specified format. Please refer to the [#formats](#formats) section to see available formats.
|
Formats a date object into a time string with the specified format. Please refer to the [#formats](#formats) section to see available formats.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>{$_.time(new Date(2019, 3, 24, 23, 45))}</div>
|
<div>{$time(new Date(2019, 3, 24, 23, 45))}</div>
|
||||||
<!-- 11:45 PM -->
|
<!-- 11:45 PM -->
|
||||||
|
|
||||||
<div>{$_.time(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}</div>
|
<div>{$time(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}</div>
|
||||||
<!-- 11:45:00 PM -->
|
<!-- 11:45:00 PM -->
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `_.date(date: Date, options: MessageObject): string`
|
#### `$date(date: Date, options: MessageObject)`
|
||||||
|
|
||||||
|
`import { date } from 'svelte-i18n'`
|
||||||
|
|
||||||
Formats a date object into a string with the specified format. Please refer to the [#formats](#formats) section to see available formats.
|
Formats a date object into a string with the specified format. Please refer to the [#formats](#formats) section to see available formats.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>{$_.date(new Date(2019, 3, 24, 23, 45))}</div>
|
<div>{$date(new Date(2019, 3, 24, 23, 45))}</div>
|
||||||
<!-- 4/24/19 -->
|
<!-- 4/24/19 -->
|
||||||
|
|
||||||
<div>{$_.date(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}</div>
|
<div>{$date(new Date(2019, 3, 24, 23, 45), { format: 'medium' } )}</div>
|
||||||
<!-- Apr 24, 2019 -->
|
<!-- Apr 24, 2019 -->
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `_.number(number: number, options: MessageObject): string`
|
#### `$number(number: number, options: MessageObject)`
|
||||||
|
|
||||||
|
`import { number } from 'svelte-i18n'`
|
||||||
|
|
||||||
Formats a number with the specified locale and format. Please refer to the [#formats](#formats) section to see available formats.
|
Formats a number with the specified locale and format. Please refer to the [#formats](#formats) section to see available formats.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>{$_.number(100000000)}</div>
|
<div>{$number(100000000)}</div>
|
||||||
<!-- 100,000,000 -->
|
<!-- 100,000,000 -->
|
||||||
|
|
||||||
<div>{$_.number(100000000, { locale: 'pt' })}</div>
|
<div>{$number(100000000, { locale: 'pt' })}</div>
|
||||||
<!-- 100.000.000 -->
|
<!-- 100.000.000 -->
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ There are two different ways of adding a new dicitonary of messages to a certain
|
|||||||
|
|
||||||
##### 2.1 Synchronous
|
##### 2.1 Synchronous
|
||||||
|
|
||||||
Just `import`/`require` your locale `.json` files and pass them to the [`addMessages(locale, dict)`](/docs/Methods.md#addmessages) method.
|
Just `import`/`require` your locale `.json` files and pass them to the [`addMessages(locale, dict)`](/docs/Methods.md#addmessage) method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// src/i18n.js
|
// src/i18n.js
|
||||||
@ -60,7 +60,7 @@ register('pt', () => import('./pt.json'))
|
|||||||
|
|
||||||
#### 3. Initializing
|
#### 3. Initializing
|
||||||
|
|
||||||
After populating your [`$dictionary`](/docs/Dictionary) with [`addMessages()`](/docs/Methods.md#addmessages) or registering loaders via [`register()`](/docs/Methods.md#register), you are ready to bootstrap the library. You can use [`init()`](/docs/Methods.md#init) to define the fallback locale, initial locale and other options of your app.
|
After populating your [`$dictionary`](/docs/Dictionary.md) with [`addMessages()`](/docs/Methods.md#addmessages) or registering loaders via [`register()`](/docs/Methods.md#register), you are ready to bootstrap the library. You can use [`init()`](/docs/Methods.md#init) to define the fallback locale, initial locale and other options of your app.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// src/i18n.js
|
// src/i18n.js
|
||||||
@ -104,7 +104,7 @@ Please note that the `fallbackLocale` is always loaded, independent of the curre
|
|||||||
|
|
||||||
#### 4. Localizing your app
|
#### 4. Localizing your app
|
||||||
|
|
||||||
After having the initial locale set, you're ready to start localizing your app. Import the [`$format`](/docs/Formatting) method, or any of its aliases, to any component that needs to be translated. Then, just call [`$format`](/docs/Formatting) passing the message `id` on your layout and voila! 🎉
|
After having the initial locale set, you're ready to start localizing your app. Import the [`$format`](/docs/Formatting.md) method, or any of its aliases, to any component that needs to be translated. Then, just call [`$format`](/docs/Formatting.md) passing the message `id` on your layout and voila! 🎉
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
@ -121,4 +121,4 @@ After having the initial locale set, you're ready to start localizing your app.
|
|||||||
</nav>
|
</nav>
|
||||||
```
|
```
|
||||||
|
|
||||||
See [Formatting](/docs/Formatting) to read about the supported message syntax.
|
See [Formatting](/docs/Formatting.md) to read about the supported message syntax.
|
||||||
|
@ -65,7 +65,7 @@ interface Formats {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Please refer to the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) documentations to see available formatting options.
|
Please refer to the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.md) and [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat.md) documentations to see available formatting options.
|
||||||
|
|
||||||
**Example**:
|
**Example**:
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ register('en', () => import('./_locales/en.json'))
|
|||||||
register('pt', () => import('./_locales/pt.json'))
|
register('pt', () => import('./_locales/pt.json'))
|
||||||
```
|
```
|
||||||
|
|
||||||
See [how to asynchronously load dictionaries](/svelte-i18n/wiki#22-asynchronous).
|
See [how to asynchronously load dictionaries](/svelte-i18n/blob/master/docs#22-asynchronous).
|
||||||
|
|
||||||
#### waitLocale
|
#### waitLocale
|
||||||
|
|
||||||
@ -145,7 +145,7 @@ See [how to asynchronously load dictionaries](/svelte-i18n/wiki#22-asynchronous)
|
|||||||
|
|
||||||
`waitLocale(locale: string = $locale): Promise<void>`
|
`waitLocale(locale: string = $locale): Promise<void>`
|
||||||
|
|
||||||
Executes the queue of `locale`. If the queue isn't resolved yet, the same promise is returned. Great to use in the `preload` method of Sapper for awaiting [`loaders`](/svelte-i18n/wiki#22-asynchronous).
|
Executes the queue of `locale`. If the queue isn't resolved yet, the same promise is returned. Great to use in the `preload` method of Sapper for awaiting [`loaders`](/svelte-i18n/blob/master/docs#22-asynchronous).
|
||||||
|
|
||||||
**Example**:
|
**Example**:
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user