倒计时 Countdown

倒计时组件用于实时展示倒计时数值，精度支持毫秒

使用

API

安装使用

import { TiCountdown } from '@titian-design/mobile-react'

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiCountdown } from 'titian-h5-react';

export default function App() {
  return <TiCountdown time={12 * 60 * 1000} />;
}

风格

codesanbox

copy

code

import React from 'react';
import { TiCountdown } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiCountdown time={12 * 60 * 1000} variant="pure" format="DD天HH:mm:ss SSS" />
      <TiCountdown time={12 * 60 * 1000} variant="block" format="DD天HH时mm分ss SSS" />
      <TiCountdown time={12 * 60 * 1000} variant="mixture" format="D天H时m分s SSS" />
    </div>
  );
}

启动、暂停、重置

启动暂停重置

codesanbox

copy

code

import React, { useRef } from 'react';
import { TiButton, TiCountdown } from 'titian-h5-react';

export default function App() {
  const ref = useRef<HTMLTiCountdownElement>(null);
  return (
    <div className="code-container">
      <TiCountdown time={12 * 60 * 1000} ref={ref} />
      <div style={{ display: 'flex', gap: 10 }}>
        <TiButton onClick={() => ref.current.start()}>启动</TiButton>
        <TiButton onClick={() => ref.current.pause()}>暂停</TiButton>
        <TiButton onClick={() => ref.current.reset()}>重置</TiButton>
      </div>
    </div>
  );
}

格式化时间

codesanbox

copy

code

import React from 'react';
import { TiCountdown } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiCountdown time={12 * 60 * 1000} format="HH:mm:ss SSS" />
      <TiCountdown time={12 * 60 * 1000} format="DD天HH时mm分ss SSS" />
      <TiCountdown time={12 * 60 * 1000} format="D天H时m分s SSS" />
    </div>
  );
}

尺寸

在variant设为`block`或者`mixture`下生效，对应块状尺寸分别为`32px` `40px` `44px` `48px`

codesanbox

copy

code

import React from 'react';
import { TiCountdown } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiCountdown time={12 * 60 * 1000} variant="block" size="small" />
      <TiCountdown time={12 * 60 * 1000} variant="block" size="medium" />
      <TiCountdown time={12 * 60 * 1000} variant="block" size="big" />
      <TiCountdown time={12 * 60 * 1000} variant="block" size="large" />
    </div>
  );
}

自定义内容

天

:

:

:

codesanbox

copy

code

import React, { useState } from 'react';
import { TiCountdown, TimeGroup } from 'titian-h5-react';

export default function App() {
  const [time, setTime] = useState<TimeGroup>({});

  return (
    <div className="code-container">
      <TiCountdown time={118888666} autoplay useSlot onChange={e => setTime(e.detail)}>
        <div style={{ display: 'flex', gap: 4 }}>
          <div className="time">{time.day}</div>
          <div className="tag">天</div>
          <div className="time">{time.hour}</div>
          <div className="tag">:</div>
          <div className="time">{time.minute}</div>
          <div className="tag">:</div>
          <div className="time">{time.second}</div>
          <div className="tag">:</div>
          <div className="time">{time.millisecond}</div>
        </div>
      </TiCountdown>
    </div>
  );
}

TiCountdown API

属性 Properties

名称	类型	必填	默认值	说明	备注
variant	string	否	pure	倒计时的风格，可选值：pure block mixture	-
size	string	否	medium	倒计时的尺寸，在variant设为block或者mixture下生效，可选值：small medium big large，对应块状尺寸分别为32px 40px 44px 48px	-
time	number	否	1200	倒计时时长，单位毫秒	-
format	string	否	HH:mm:ss	时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒	-
autoplay	boolean	否	false	是否自动开始倒计时	-
useSlot	boolean	否	false	是否使用自定义样式插槽	-
extStyle	string	否	-	根节点样式	-

事件 Events

名称	参数列表	描述	备注
onFinish	(e: CustomEvent) => void	倒计时结束时触发	-
onChange	(e: CustomEvent<{day: number, hour: number, minute: number, second: number, millisecond: number}>) => void	时间变化时触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-

外部样式类 External Classes

名称	说明	备注
extClass	根节点样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--countdown-color	theme.color.function.error.1000	块状风格文字颜色	-
--countdown-font-size	theme.fontSize.t4	倒计时文字字号（size="small"）	-
	theme.fontSize.t5	倒计时文字字号（size="medium"）	-
	theme.fontSize.t6	倒计时文字字号（size="big"）	-
	theme.fontSize.t7	倒计时文字字号（size="large"）	-
--countdown-line-height	34px	倒计时文字行高	-
--countdown-border-radius	theme.borderRadius.r2	块状风格下，圆角	-
--countdown-background	theme.color.function.error.100	块状风格下，背景色	-
--countdown-font-family	wemo	块状风格下，文字字体	-
--countdown-font-weight	theme.fontWeight.semibold	块状风格下，文字字重	-
--countdown-day-color	theme.color.function.error.1000	块状风格下，天数文字颜色	-
--countdown-day-font-size	theme.fontSize.t4	块状风格下，天数文字大小（size="small"）	-
	theme.fontSize.t4	块状风格下，天数文字大小（size="medium"）	-
	theme.fontSize.t5	块状风格下，天数文字大小（size="big"）	-
	theme.fontSize.t5	块状风格下，天数文字大小（size="large"）	-
--countdown-day-margin	theme.spacing.gap.g3	块状风格下，天数区域的间距	-
--countdown-dot-color	theme.color.function.error.1000	块状风格下，图标冒号颜色	-
--countdown-dot-size	theme.fontSize.t2	块状风格下，图标冒号大小（size="small"）	-
	theme.fontSize.t4	块状风格下，图标冒号大小（size="medium"）	-
	theme.fontSize.t4	块状风格下，图标冒号大小（size="big"）	-
	theme.fontSize.t6	块状风格下，图标冒号大小（size="large"）	-
--countdown-size	theme.fontSize.t8	块状风格下，方块的大小（size="small"）	-
	theme.fontSize.t12	块状风格下，方块的大小（size="medium"）	-
	theme.fontSize.t14	块状风格下，方块的大小（size="big"）	-
	theme.fontSize.t16	块状风格下，方块的大小（size="large"）	-
--countdown-millisecond-width	52px	块状风格下，毫秒区域的宽度	-