mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 19: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
3.8 KiB
3.8 KiB
Relative Time
[component-header:sl-relative-time]
Localization is handled by the browser's Intl.RelativeTimeFormat API. No language packs are required.
<!-- Shoelace 2 release date 🎉 -->
<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
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() can interpret or a 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 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.
<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>
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.
<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>
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.
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>
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]