1.0.5 • Published 7 months ago
@xuda.io/xuda-ui-plugin-timeago v1.0.5
Timeago.js Xuda Plugin
The Timeago.js Xuda Plugin provides dynamic, user-friendly time formatting to display time differences in a natural language format (e.g., "5 minutes ago"). Seamlessly integrate it with Xuda UI for live-updating, localized time displays.
Features
- Natural Language Time Formatting: Displays relative time differences such as "just now" or "2 days ago."
- Real-time Updates: Automatically updates the displayed time at regular intervals.
- Localization Support: Includes multiple language options for internationalization.
- Lightweight and Efficient: Built with performance in mind.
- Seamless Xuda Integration: Works natively with Xuda UI properties and rendering system.
Installation in Xuda Platform
- Navigate to the Plugins tab in your Xuda project node on Xuda.io.
- Locate the Timeago.js Xuda Plugin.
- Install the plugin by toggling the activation button.
Usage in Xuda Studio
- Open Xuda Studio on Xuda.io and select a UI component.
- In the Properties Pane, scroll down to find the plugin options.
- Activate the plugin and configure the properties as needed.
Properties
Property | Type | Description | Default Value |
---|---|---|---|
timeago_datetime | string | The datetime value to display as a relative time. Must be in ISO format. | Current datetime |
timeago_locale | string | The locale to use for relative time formatting (e.g., en, he, fr). | en |
timeago_live | boolean | Enables live updates for the relative time. | true |
timeago_refresh_interval | number | The interval (in milliseconds) to refresh the displayed time when live updates are enabled. | 60000 (1 minute) |
Supported Locales
Here are some of the supported locales:
en
: Englishhe
: Hebrewfr
: Frenches
: Spanishde
: Germanru
: Russianzh-cn
: Chinese (Simplified)ja
: Japaneseko
: Korean
For a complete list of supported locales, visit the Timeago.js Documentation.
Example Configuration
Display Time Difference:
- Datetime:
2024-12-01T10:00:00Z
- Locale: Hebrew (
he
) - Live Updates: Enabled
- Refresh Interval: 30 seconds
- Datetime:
Properties Pane in Xuda Studio:
timeago_datetime
:2024-12-01T10:00:00Z
timeago_locale
:he
timeago_live
:true
timeago_refresh_interval
:30000