Press Next

# MatchScheduleNotStart

Match schedule component for when the match has not started yet, displaying countdown and button status. Supports smart countdown, custom button styles and other functions.

# Features

  • ⏰ Smart Countdown - Based on PressCountDown component, automatically updates countdown
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapt to different screen sizes
  • 🔧 Slot Support - Support custom footer button content
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match countdown before start
  • Activity start status prompt
  • Online game match waiting
  • Sports event countdown before start

# Import

import PressMatchScheduleNotStart from 'press-next/press-match-schedule-not-start/press-match-schedule-not-start';

# Code Demo

# Basic Usage

<template>
  <PressMatchScheduleNotStart
    :title="title"
    :end-time="endTime"
    :button-text="buttonText"
    :button-disabled="buttonDisabled"
    @on-button-click="handleButtonClick"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleNotStart from 'press-next/press-match-schedule-not-start/press-match-schedule-not-start';

const title = 'Match Starting Soon';
const buttonText = 'Waiting to Start';
const buttonDisabled = true;

// Set countdown end time: 25 days 16 hours 18 minutes later
const endTime = Date.now() + 25 * 24 * 60 * 60 * 1000 + 16 * 60 * 60 * 1000 + 18 * 60 * 1000;

const handleButtonClick = () => {
  console.log('Button clicked');
};

const handleCountdownEnd = () => {
  console.log('Countdown ended');
};
</script>

# Button Types

<template>
  <!-- Default button -->
  <PressMatchScheduleNotStart
    title="Match Starting Soon"
    :end-time="endTime"
    button-type="default"
    button-text="Waiting to Start"
  />

  <!-- Primary button -->
  <PressMatchScheduleNotStart
    title="Match Starting Soon"
    :end-time="endTime"
    button-type="primary"
    button-text="Registration Open"
    :button-disabled="false"
  />

  <!-- Plain button -->
  <PressMatchScheduleNotStart
    title="Match Starting Soon"
    :end-time="endTime"
    button-type="primary"
    :button-plain="true"
    button-text="Registration Open"
    :button-disabled="false"
  />

  <!-- Different sizes -->
  <PressMatchScheduleNotStart
    title="Match Starting Soon"
    :end-time="endTime"
    button-size="large"
    button-text="Registration Open"
  />

  <PressMatchScheduleNotStart
    title="Match Starting Soon"
    :end-time="endTime"
    button-size="small"
    button-text="Registration Open"
  />
</template>

# Custom Slots

<template>
  <PressMatchScheduleNotStart
    :title="title"
    :end-time="endTime"
  >
    <template #footer>
      <div class="custom-footer">
        <button @click="handleCustomAction">Custom Button</button>
      </div>
    </template>
  </PressMatchScheduleNotStart>
</template>

# Custom Theme

<template>
  <PressMatchScheduleNotStart
    custom-class="my-custom-theme"
    :title="title"
    :end-time="endTime"
  />
</template>

<style>
.my-custom-theme {
  /* Card styles */
  --sns-card-bg: linear-gradient(227deg, #667eea 0%, #764ba2 100%);
  --sns-title-color: #ffffff;
  
  /* Button styles */
  --sns-action-button-radius: .4rem;
  --sns-action-button-bg: #667eea;
}
</style>

Note: The countdown styles are controlled by the PressMatchCountDownNormal component. Please use CSS variables with the --pmcdn-* prefix for customization. See PressMatchCountDownNormal Documentation.

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
title Title text string 'Match Starting Soon'
end-time Countdown end timestamp (milliseconds) number Date.now() + 25d 16h 18m
button-text Button text string 'Waiting to Start'
button-type Button type 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain Whether button is plain boolean false
button-size Button size 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type WeChat open capability string ''
button-disabled Whether button is disabled boolean true
button-custom-style Custom button style object {}

# Slots

Name Description
footer Custom footer button area content

# Events

Event Description Parameters
on-button-click Triggered when clicking button -
on-countdown-end Triggered when countdown ends -

# Notes

# Usage Recommendations

  1. Auto-update Countdown: Based on PressMatchCountDownNormal component, the countdown updates automatically without manual timer management
  2. Countdown Style Customization: Countdown styles are controlled by the PressMatchCountDownNormal component. Use CSS variables with the --pmcdn-* prefix for customization. See PressMatchCountDownNormal Documentation
  3. Timestamp Format: end-time accepts millisecond-level timestamps
  4. Button Configuration: Supports multiple button types (primary, info, warning, danger), sizes (normal, large, small, mini), and plain mode
  5. WeChat Open Capabilities: Use button-open-type to access WeChat Mini Program open capabilities (e.g., share, get phone number)
  6. Button Status: Recommend setting button to disabled state before countdown ends
  7. Responsive Adaptation: On small screen devices, consider adjusting related size variables

# Performance Optimization

  • Component uses virtual host to reduce DOM layers
  • Countdown based on high-performance PressMatchCountDownNormal component
  • Styles use CSS variables for easy dynamic theme switching
  • Supports custom slots for flexible extension

# Compatibility

  • Supports Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Supports WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

Note: The countdown styles are controlled by the PressMatchCountDownNormal component. Please use CSS variables with the --pmcdn-* prefix for customization. See PressMatchCountDownNormal Documentation.

# Style Variables

# Spacing System

Name Default Description
--sns-header-padding 0.56rem 0 0 0 Header area padding
--sns-title-wrapper-padding 0 0.66rem Title wrapper padding
--sns-title-wrapper-gap 0.32rem Title decoration gap
--sns-countdown-padding 0.32rem 1.04rem 0 1.04rem Countdown area padding
--sns-countdown-gap 0 Countdown container gap
--sns-action-button-margin 0.48rem 0.56rem Footer button margin

# Box Model System

Name Default Description
--sns-card-display flex Card display
--sns-card-flex-direction column Card flex direction
--sns-card-width 100% Card width
--sns-card-height 4.48rem Card height
--sns-bar-width 100% Bar width
--sns-bar-height 0.08rem Bar height
--sns-title-wrapper-width 100% Title wrapper width
--sns-title-wrapper-height 0.48rem Title wrapper height
--sns-title-decoration-flex 1 Title decoration flex
--sns-title-decoration-height 0.02rem Title decoration height
--sns-action-button-width auto Footer button width
--sns-action-button-height 0.8rem Footer button height

# Color System

Name Default Description
--sns-card-bg $color-surface-default Card background
--sns-bar-bg $color-surface-brand-light2 Bar background
--sns-title-color $color-text-primary Title text color
--sns-title-decoration-left-bg linear-gradient(to right, rgba(217, 227, 255, 0), rgba(217, 227, 255, 0.75)) Left decoration background gradient
--sns-title-decoration-right-bg linear-gradient(to left, rgba(217, 227, 255, 0), rgba(217, 227, 255, 0.75)) Right decoration background gradient
--sns-action-button-bg $color-surface-secondary Footer button background
--sns-action-button-color $color-text-invert-default Footer button text color
--sns-action-button-border-color transparent Footer button border color

# Typography System

Name Default Description
--sns-title-font-size $font-size-lg Title font size
--sns-title-font-weight $font-weight-bold Title font weight
--sns-title-line-height 1.5 Title line height
--sns-header-text-align center Header text align
--sns-action-button-font-size $font-size-lg Footer button font size
--sns-action-button-font-weight $font-weight-bold Footer button font weight

# Border Radius System

Name Default Description
--sns-card-radius $border-radius-sm Card border radius
--sns-bar-border-top-left-radius $border-radius-sm Bar top left border radius
--sns-bar-border-top-right-radius $border-radius-sm Bar top right border radius
--sns-action-button-radius $border-radius-999 Footer button border radius

# Others

Name Default Description
--sns-card-position relative Card position
--sns-bar-position relative Bar position
--sns-header-position relative Header position
--sns-countdown-position relative Countdown position
--sns-action-button-disabled-opacity 1 Footer button disabled opacity

← MatchScheduleTitle →