mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
104 lines
3.8 KiB
Markdown
104 lines
3.8 KiB
Markdown
# Relative Time
|
|
|
|
[component-header:sl-relative-time]
|
|
|
|
Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
|
|
|
|
```html preview
|
|
<!-- Shoelace 2 release date 🎉 -->
|
|
<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
|
|
```
|
|
|
|
The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
|
|
|
|
?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
|
|
|
|
## Examples
|
|
|
|
### Keeping Time in Sync
|
|
|
|
Use the `sync` attribute to update the displayed value automatically as time passes.
|
|
|
|
```html preview
|
|
<div class="relative-time-sync">
|
|
<sl-relative-time sync></sl-relative-time>
|
|
</div>
|
|
|
|
<script>
|
|
const container = document.querySelector('.relative-time-sync');
|
|
const relativeTime = container.querySelector('sl-relative-time');
|
|
|
|
relativeTime.date = new Date(new Date().getTime() - 60000);
|
|
</script>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const date = new Date(new Date().getTime() - 60000);
|
|
|
|
const App = () => <SlRelativeTime date={date} sync />;
|
|
```
|
|
|
|
### Formatting Styles
|
|
|
|
You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
|
|
|
|
```html preview
|
|
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br />
|
|
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br />
|
|
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
|
|
<br />
|
|
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
|
|
<br />
|
|
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### Localization
|
|
|
|
Use the `lang` attribute to set the desired locale.
|
|
|
|
```html preview
|
|
English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br />
|
|
Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br />
|
|
German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br />
|
|
Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br />
|
|
Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
|
|
<br />
|
|
Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
|
|
<br />
|
|
German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
|
|
<br />
|
|
Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
|
|
<br />
|
|
Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
|
|
</>
|
|
);
|
|
```
|
|
|
|
[component-metadata:sl-relative-time]
|