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

1. Navigate to the Plugins tab in your Xuda project node on Xuda.io.
2. Locate the Timeago.js Xuda Plugin.
3. Install the plugin by toggling the activation button.

Usage in Xuda Studio

1. Open Xuda Studio on Xuda.io and select a UI component.
2. In the Properties Pane, scroll down to find the plugin options.
3. 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: English
• he: Hebrew
• fr: French
• es: Spanish
• de: German
• ru: Russian
• zh-cn: Chinese (Simplified)
• ja: Japanese
• ko: Korean

For a complete list of supported locales, visit the Timeago.js Documentation.

Example Configuration

1. Display Time Difference:

   • Datetime: 2024-12-01T10:00:00Z
   • Locale: Hebrew (he)
   • Live Updates: Enabled
   • Refresh Interval: 30 seconds

2. Properties Pane in Xuda Studio:

   • timeago_datetime: 2024-12-01T10:00:00Z
   • timeago_locale: he
   • timeago_live: true
   • timeago_refresh_interval: 30000