elapsed_time_element 0.10.3

Dart Polymer component displaying elapsed time for a DateTime instance. For example, 1 day 2 hours 3 minutes.

Elapsed Time Web Component

Compares a DateTime to the current time and displays the elapsed time, such as

4 hours 38 minutes

Demonstration code can be exercised by running example/app.html in Dartium. This references a demo web component, which in turn references the 'elapsed-time' element.

Usage

1. This is the simplest case. DateTime.now() is the default time, and no attributes are set.

2. Units like 'minutes' and 'hours' can be abbreviated for a more succinct presentation. Set "verbose" to "false".

3. A ""prefix"" and/or suffix can be specified (for example, " ago").

4. A message can be specified when the elapse is less than one minute (for example, as "moments ago").

5. A specific date can be specified (for example, two hours ago).

6. A future specific date can be specified (for example, two hours from now).

7. The CSS style of the elapsed time can be explicitly set (for example, "color: red;").

8. CSS style can be dynamically configured via a callback (for example, bold red for 2 hours or more, otherwise green italic).

   Dart code:

   @published StyleCallbackFunction colorTime = (DateTime dateTime, Duration duration) => duration.inMinutes >= 2 ? "color: red; font-weight: bold" : "color: green; font-style: italic";

9. The tooltip icon can be altered to another core-icons option (for example, to "warning").