Press Next

# MatchScheduleNotKickoff

A schedule component for team assembly status, displaying brand logo, team member list and countdown information. Supports automatic countdown, member avatar display, and custom styling.

# Features

  • ⏰ Smart Countdown - Based on PressCountDown component, auto-updating countdown
  • 👥 Member Display - Show member avatars with overflow indication
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapts to different screen sizes
  • 🔧 Slot Support - Custom logo content support
  • ⚡ Lightweight - Optimized code structure with excellent performance

# Use Cases

  • Esports match pre-start display
  • Team activity assembly status
  • Online game team preparation
  • Sports event countdown

# Import

import PressMatchScheduleNotKickoff from 'press-next/press-match-schedule-not-kickoff/press-match-schedule-not-kickoff';

# Usage

# Basic Usage

<template>
  <PressMatchScheduleNotKickoff
    :logo="logo"
    :title="title"
    :members="members"
    :end-time="endTime"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

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

const logo = 'https://placehold.co/72x72/1E72FF/ffffff?text=LOGO';
const title = 'Team Assembled, Match Starting Soon';
const members = [
  { id: 1, name: 'Member 1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: 'Member 2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: 'Member 3', avatar: 'https://placehold.co/40x40' },
  { id: 4, name: 'Member 4', avatar: 'https://placehold.co/40x40' },
  { id: 5, name: 'Member 5', avatar: 'https://placehold.co/40x40' },
];

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

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

# Custom Logo Slot

<template>
  <PressMatchScheduleNotKickoff
    :title="title"
    :members="members"
    :end-time="endTime"
  >
    <template #logo>
      <div class="custom-logo">
        <img src="your-logo.png" alt="Custom Logo">
      </div>
    </template>
  </PressMatchScheduleNotKickoff>
</template>

# Custom Theme

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

<style>
.my-custom-theme {
  --snk-card-bg: linear-gradient(180deg, #fff 0%, #fff 33%, #f0f0f0 100%);
  --snk-title-color: #212124;
  --snk-countdown-label-color: #434c58;
}
</style>

# Multiple Members Display

<template>
  <PressMatchScheduleNotKickoff
    :logo="logo"
    :title="title"
    :members="members"
    :max-display-members="5"
    :end-time="endTime"
  />
</template>

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

// 24 members, display first 5, show +19 for remaining
const members = Array.from({ length: 24 }, (_, i) => ({
  id: i + 1,
  name: `Member ${i + 1}`,
  avatar: `https://placehold.co/40x40?text=${i + 1}`,
}));

const endTime = Date.now() + 25 * 24 * 60 * 60 * 1000;
</script>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
logo Brand logo URL string 'https://placehold.co/72x72'
logo-alt Logo alt text string 'Brand Logo'
title Title text string 'Team Assembled, Match Starting Soon'
members Member list Member[] []
max-display-members Maximum displayed members number 5
countdown-label Countdown label string 'Match Countdown'
end-time Countdown end timestamp (ms) number Date.now() + 25d 25h 25m

# Member Data Structure

interface Member {
  id: string | number; // Member ID
  name: string; // Member name
  avatar: string; // Avatar URL
}

# Slots

Name Description
logo Custom brand logo content

# Events

Event Description Parameters
on-countdown-end Triggered when countdown ends -

# Notes

# Usage Recommendations

  1. Auto-updating Countdown: Based on PressCountDown, countdown updates automatically without manual timer management
  2. Member Count: Members exceeding max-display-members will be shown as +number
  3. Avatar Loading: Recommend setting default placeholder images to avoid blank display on load failure
  4. Timestamp Format: end-time accepts millisecond timestamp

# Performance Optimization

  • Use v-memo directive to optimize member list rendering
  • Consider virtual scrolling for large member lists
  • Recommend CDN for avatar images

# Compatibility

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

# Theme Customization

# Style Variables

The component provides the following CSS variables for style customization. For usage, please refer to the ConfigProvider component.

# Positioning

Name Default Description
--snk-card-position relative Card position
--snk-bar-position relative Top bar position
--snk-logo-wrapper-position relative Logo wrapper position
--snk-member-avatar-position relative Member avatar position
--snk-more-members-position relative More members indicator position

# Box Model

Name Default Description
--snk-card-width 100% Card width
--snk-card-height auto Card height
--snk-card-padding 0 0 0.52rem 0 Card padding
--snk-bar-width 100% Top bar width
--snk-bar-height 0.08rem Top bar height
--snk-logo-wrapper-size 1.44rem Logo wrapper size
--snk-logo-wrapper-margin -0.8rem auto 0 Logo wrapper margin
--snk-logo-wrapper-overflow hidden Logo wrapper overflow
--snk-logo-wrapper-box-sizing border-box Logo wrapper box-sizing
--snk-logo-bg-size 100% Logo background size
--snk-logo-size 100% Logo image size
--snk-title-wrapper-width 100% Title wrapper width
--snk-title-wrapper-height 0.48rem Title wrapper height
--snk-title-wrapper-margin-top $spacing-lg Title wrapper top margin
--snk-title-wrapper-padding 0 0.3rem Title wrapper padding
--snk-title-wrapper-gap 0.16rem Title element gap
--snk-title-decoration-flex 1 Title decoration flex
--snk-title-decoration-height 0.02rem Title decoration height
--snk-member-avatar-size 0.8rem Member avatar size
--snk-member-img-size 100% Member image size
--snk-more-members-size 0.8rem More members indicator size
--snk-members-margin-top $spacing-xl Members list top margin
--snk-members-gap 0.12rem Member avatar gap
--snk-countdown-margin-top $spacing-xl Countdown top margin
--snk-countdown-gap 0.08rem Countdown element gap

# Border

Name Default Description
--snk-card-radius $border-radius-sm Card border radius
--snk-bar-border-top-left-radius $border-radius-sm Bar top left radius
--snk-bar-border-top-right-radius $border-radius-sm Bar top right radius
--snk-logo-wrapper-border-width 1px Logo wrapper border width
--snk-logo-wrapper-border-style solid Logo wrapper border style
--snk-logo-wrapper-border-color $color-divider-light Logo wrapper border color
--snk-logo-wrapper-border-radius $border-radius-circle Logo wrapper radius
--snk-logo-border-radius $border-radius-circle Logo image radius
--snk-member-avatar-radius $border-radius-circle Member avatar radius
--snk-member-avatar-border-color $color-divider-default Member avatar border color
--snk-more-members-border-color $color-divider-default More members border color

# Background

Name Default Description
--snk-card-bg linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(215, 226, 255, 0.6) 100%) Card background gradient (first 33% white, last 67% gradient)
--snk-bar-bg $color-surface-brand-light2 Top bar background
--snk-more-members-bg $color-surface-secondary More members background
--snk-title-decoration-left-bg linear-gradient(to right, transparent, #d9e3ff) Left decoration background
--snk-title-decoration-right-bg linear-gradient(to left, transparent, #d9e3ff) Right decoration background

# Typography

Name Default Description
--snk-title-color #212124 Title text color
--snk-title-font-size $font-size-lg Title font size
--snk-title-font-weight $font-weight-bold Title font weight
--snk-title-line-height 1.5 Title line height
--snk-more-text-color $color-text-invert-default More members text color
--snk-more-text-font-size $font-size-md More members font size
--snk-more-text-font-weight $font-weight-regular More members font weight
--snk-countdown-label-color $color-text-secondary Countdown label color
--snk-countdown-label-font-size $font-size-sm Countdown label font size
--snk-countdown-label-font-weight $font-weight-regular Countdown label font weight
--snk-countdown-label-line-height 1.5 Countdown label line height

# Others

Name Default Description
--snk-logo-object-fit cover Logo image object fit
--snk-member-img-object-fit cover Member image object fit

← MatchScheduleNotStart →