Conteúdo v1.0.0

Contagem regressiva

Temporizador de contagem regressiva animado até uma data alvo. O estilo simples exibe números planos com rótulos. O estilo flip renderiza um efeito de relógio flip 3D com cartões divididos e animações CSS keyframe.

Simples

Números planos com rótulos abaixo de cada unidade, separados por dois pontos

Opções

Nome Tipo Padrão Descrição
target_date * String obrigatório ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Flip

Animação de relógio flip 3D com cartões divididos e transformações de perspectiva

Opções

Nome Tipo Padrão Descrição
target_date * String obrigatório ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Changelog v1.0.0

- v1.0.0: Initial release with simple and flip styles

Obter Acesso Completo

Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.

Obter Acesso Agora