cupcakearmy/svelte-i18n
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-i18n.git synced 2024-11-16 18:10:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ update docs

Browse Source
This commit is contained in:
Christian Kaisermann 2020-01-21 10:11:10 -03:00
parent c922055282
commit e1ef5801aa
3 changed files with 21 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/Formatting.md
View File

@ -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 -->
```
### Formatting utilities
### `$time(number: Date, options: MessageObject)`
The formatter method also provides some casing methods:
- `_.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`
`import { time } from 'svelte-i18n'`
Formats a date object into a time string with the specified format. Please refer to the [#formats](#formats) section to see available formats.
```html
<div>{$_.time(new Date(2019, 3, 24, 23, 45))}</div>
<div>{$time(new Date(2019, 3, 24, 23, 45))}</div>
<!-- 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 -->
```
#### `_.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.
```html
<div>{$_.date(new Date(2019, 3, 24, 23, 45))}</div>
<div>{$date(new Date(2019, 3, 24, 23, 45))}</div>
<!-- 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 -->
```
#### `_.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.
```html
<div>{$_.number(100000000)}</div>
<div>{$number(100000000)}</div>
<!-- 100,000,000 -->
<div>{$_.number(100000000, { locale: 'pt' })}</div>
<div>{$number(100000000, { locale: 'pt' })}</div>
<!-- 100.000.000 -->
```

8
docs/Getting Started.md
View File

@ -26,7 +26,7 @@ There are two different ways of adding a new dicitonary of messages to a certain
##### 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
// src/i18n.js
@ -60,7 +60,7 @@ register('pt', () => import('./pt.json'))
#### 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
// src/i18n.js
@ -104,7 +104,7 @@ Please note that the `fallbackLocale` is always loaded, independent of the curre
#### 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
<script>
@ -121,4 +121,4 @@ After having the initial locale set, you're ready to start localizing your app.
</nav>
```
See [Formatting](/docs/Formatting) to read about the supported message syntax.
See [Formatting](/docs/Formatting.md) to read about the supported message syntax.

6
docs/Methods.md
View File

@ -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**:
@ -137,7 +137,7 @@ register('en', () => import('./_locales/en.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
@ -145,7 +145,7 @@ See [how to asynchronously load dictionaries](/svelte-i18n/wiki#22-asynchronous)
`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**: