Bento 日期倒计时

显示到指定日期的倒计时序列。有关可用时间参数的信息，请参阅返回的时间参数部分。

Web 组件

我们不支持 bento-date-countdown 的 Web 组件版本，因为 <template> 支持仍在设计中。可以在此问题中跟踪此工作。

Preact/React 组件

通过 npm 导入

npm install @bentoproject/date-countdown

import React from 'react';
import {BentoDateCountdown} from '@bentoproject/date-countdown/react';
import '@bentoproject/date-countdown/styles.css';

function App() {
  return (
    <BentoDateCountdown
      datetime={200000000}
      biggestUnit={'HOURS'}
      render={(data) => (
        <div>
          <span>{`${data.days} ${data.dd} ${data.d}`}</span>
          <br />
          <span>{`${data.hours} ${data.hh} ${data.h}`}</span>
          <br />
          <span>{`${data.minutes} ${data.mm} ${data.m}`}</span>
          <br />
          <span>{`${data.seconds} ${data.ss} ${data.s}`}</span>
        </div>
      )}
    />
  );
}

交互性和 API 使用

Bento Date Countdown 组件没有命令式 API。但是，Bento Date Countdown Preact/React 组件确实接受一个 render 属性，用于呈现消费者的模板。此 render 属性应为一个函数，Bento Date Countdown Preact/React 组件可以使用它来呈现其模板。render 回调将为消费者提供各种与日期相关的参数，以便在呈现的模板中进行插值。有关更多信息，请参阅render 属性部分。

布局和样式

Bento Date Countdown Preact/React 组件允许消费者呈现自己的模板。这些模板可以使用内联样式、<style> 标记、导入其自己的样式表的 Preact/React 组件。

属性

datetime

必需属性。表示日期和时间，格式为日期、字符串或数字。如果是字符串，则必须是标准 ISO 8601 日期字符串（例如 2017-08-02T15:05:05.000Z）或字符串 now。如果设置为 now，它将使用页面加载的时间来呈现其模板。如果是数字，则必须是毫秒为单位的 POSIX 纪元值。

locale

每个计时器单元的国际化语言字符串。默认值为 en（表示英语）。此属性支持用户浏览器支持的所有值。

whenEnded

指定是否在计时器达到 0 秒时停止计时器。该值可以设置为 stop（默认值），表示计时器在 0 秒时停止，不会超过最终日期，也可以设置为 continue，表示计时器在达到 0 秒后继续运行。

biggestUnit

允许 bento-date-countdown 组件根据指定的 biggest-unit 值计算时间差。例如，假设还有 50 天 10 小时，如果 biggest-unit 设置为 hours，则结果显示还有 1210 小时。

• 支持的值：days、hours、minutes、seconds
• 默认值：days

countUp

包含此属性以反转倒计时的方向，改为正向计数。这对于显示过去目标日期以来的经过时间非常有用。要继续倒计时，当目标日期在过去时，请务必包含 when-ended 属性，其值为 continue。如果目标日期在未来，bento-date-countdown 将显示递减的（朝 0 方向）负值。

render

可选回调，用于呈现模板。回调将提供一个对象，其中包含与 datetime 中表示的日期相关的属性/值。

默认情况下，Bento Date Countdown 组件将显示给定语言环境和语言环境选项的 localeString 形式的日期。有关每个属性将如何显示的更多详细信息，请参阅 返回的时间参数部分。

function render(dateParams: DateParams): JSXInternal.Element;

interface DateParams {
  day: number;
  dayName: string;
  dayNameShort: string;
  dayPeriod: string;
  dayTwoDigit: string;
  hour: number;
  hour12: number;
  hour12TwoDigit: string;
  hourTwoDigit: string;
  iso: string;
  localeString: string;
  minute: number;
  minuteTwoDigit: string;
  month: number;
  monthName: string;
  monthNameShort: string;
  monthTwoDigit: string;
  second: number;
  secondTwoDigit: string;
  timeZoneName: string;
  timeZoneNameShort: string;
  year: number;
  yearTwoDi: string;
}

返回的时间参数

此表列出了您可以在 Mustache 模板中指定的格式

格式化值示例

此表提供了在 Mustache 模板中指定格式化值的示例，以及输出示例