Press Next

# MatchScheduleNotFull

Match schedule component for when teams are not full, displaying team recruitment status and member information. Supports smart countdown, member avatar display, invite button and other functions.

# Features

  • ⏰ Smart Countdown - Based on PressMatchCountDownMini component, supports month/day/hour smart switching
  • 👥 Member Management - Display joined member avatars and support adding new members
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapt to different screen sizes
  • 🔧 Slot Support - Support custom header and footer content
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports team recruitment
  • Team activity member collection
  • Online game team formation
  • Sports event registration system

# Import

import PressMatchScheduleNotFull from 'press-next/press-match-schedule-not-full/press-match-schedule-not-full';

# Code Demo

# Basic Usage

<template>
  <PressMatchScheduleNotFull
    :team-name="teamName"
    :end-time="endTime"
    :countdown-text="countdownText"
    :team-required-members="6"
    :team-current-members="members.length"
    :members="members"
    @on-add-member="handleAddMember"
    @on-invite="handleInvite"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

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

const teamName = 'Shenzhen University';
const countdownText = 'Registration deadline';
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' },
];

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

const handleAddMember = () => {
  console.log('Add member');
};

const handleInvite = () => {
  console.log('Invite friend');
};

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

# Custom Slots

<template>
  <PressMatchScheduleNotFull
    :team-name="teamName"
    :end-time="endTime"
    :members="members"
  >
    <template #header>
      <div class="custom-header">
        <img src="your-brand-logo.png" alt="Brand Logo">
      </div>
    </template>
    <template #footer>
      <div class="custom-footer">
        <button @click="handleCustomAction">Custom Button</button>
      </div>
    </template>
  </PressMatchScheduleNotFull>
</template>

# Custom Theme

<template>
  <PressMatchScheduleNotFull
    custom-class="my-custom-theme"
    :team-name="teamName"
    :end-time="endTime"
    :members="members"
  />
</template>

<style>
.my-custom-theme {
  /* Card styles */
  --snf-header-wrap-bg: linear-gradient(227deg, #667eea 0%, #764ba2 100%);
  --snf-teamname-color: #ffffff;
  
  /* Countdown styles (controlled by PressMatchCountDownMini component) */
  --pcdm-item-bg: linear-gradient(88deg, #667eea 0%, #764ba2 100%);
  --pcdm-number-color: #ffffff;
  --pcdm-unit-color: #ffffff;
  
  /* Button styles */
  --snf-invite-button-border-radius: .4rem;
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
team-name Team name string '深圳大学'
end-time Countdown end timestamp (milliseconds) number Date.now() + 29d 23h 59m
countdown-text Countdown text string '报名截止'
brand-img Brand image URL string ''
team-required-members Required team members number 6
team-current-members Current team members number 3
members Member list Member[] []
team-tips Tips text string '否则将失去参赛资格'
invite-button-text Invite button text string '邀请好友'
bg-color Button color string -
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 ''
icon Button icon string -
button-custom-style Custom button style object {}

# Member Data Structure

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

# Slots

Name Description
header Custom header brand area content
footer Custom footer button area content

# Events

Event Description Parameters
on-add-member Triggered when clicking add member -
on-invite Triggered when clicking invite button -
on-countdown-end Triggered when countdown ends -

# Notes

# Usage Recommendations

  1. Smart Countdown Mode: Based on PressMatchCountDownMini sub-component, the countdown automatically switches between month/day/hour display modes based on duration and updates automatically without manual timer management
    • ≥30 days: displays "Month Day:Hour" format
    • 1-29 days: displays "Day Hour:Minute" format
    • <1 day: displays "Hour Minute:Second" format
  2. Countdown Style Customization: The countdown section styles are controlled by the PressMatchCountDownMini component, use CSS variables with --pcdm-* prefix for customization
  3. Member Count: team-current-members should match the members array length, or be used to display the total count exceeding the display limit
  4. Avatar Loading: Recommend setting default placeholder images for member avatars to avoid blank spaces on loading failures
  5. Timestamp Format: end-time accepts millisecond-level timestamps
  6. Responsive Adaptation: On small screen devices, consider adjusting size variables like --snf-member-size

# Performance Optimization

  • Component uses virtual nodes to reduce DOM hierarchy
  • Countdown based on high-performance PressMatchCountDownMini sub-component
  • Use v-memo directive to optimize member list rendering
  • Consider virtual scrolling for large numbers of members
  • Recommend using CDN acceleration for avatar images
  • Styles use CSS variables for easy dynamic theme switching

# 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

# Style Variables

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

Note: The countdown section styles are controlled by the PressMatchCountDownMini component. Please use CSS variables with --pcdm-* prefix for customization. See PressMatchCountDownMini Documentation for details.

# Spacing System

Name Default Description
--snf-header-wrap-padding 0.28rem 0.48rem Header area padding
--snf-content-padding 0.4rem 0.54rem Content card padding
--snf-content-margin-top -0.5rem Content area top margin
--snf-countdown-wrap-margin-top $spacing-sm Countdown container top margin
--snf-countdown-wrap-gap 0 Gap between countdown and text
--snf-desc-margin-bottom $spacing-xs Description text bottom margin
--snf-tips-margin-bottom $spacing-lg Tips text bottom margin
--snf-members-gap 0.06rem Member avatar gap
--snf-invite-button-margin-top 0.4rem Invite button top margin

# Box Model System

Name Default Description
--snf-card-width 100% Card width
--snf-card-height 5.84rem Card height
--snf-header-height 2.26rem Header area height
--snf-header-wrap-height 2.86rem Header wrapper height
--snf-teamname-max-width 4rem Team name max width
--snf-brand-width 100% Brand icon width
--snf-brand-height 3.18rem Brand icon height
--snf-brand-top -0.32rem Brand icon top offset
--snf-brand-left 0 Brand icon left offset
--snf-brand-right 0 Brand icon right offset
--snf-members-display grid Members list display
--snf-member-overflow hidden Member overflow
--snf-member-size 0.8rem Member avatar size
--snf-avatar-size 100% Avatar image size
--snf-placeholder-width 0.8rem Placeholder width
--snf-invite-button-width 100% Invite button width
--snf-invite-button-height 0.88rem Invite button height

# Border Properties

Name Default Description
--snf-member-border-color $color-divider-default Member avatar border color
--snf-placeholder-border-color $color-divider-default Placeholder border color

# Color System

Name Default Description
--snf-teamname-color $color-text-invert-light Team name text color
--snf-countdown-text-color $color-text-invert-light Countdown text color
--snf-countdown-mini-unit-color $color-text-invert-light Countdown unit color (for PressMatchCountDownMini)
--snf-countdown-mini-separator-color $color-text-invert-light Countdown separator color (for PressMatchCountDownMini)
--snf-desc-color $color-text-primary Description text color
--snf-tips-color $color-text-invert-default Tips text color
--snf-placeholder-color $color-text-invert-default Placeholder text color
--snf-placeholder-icon-color $color-border-secondary Placeholder icon color
--snf-header-wrap-bg linear-gradient(227deg, #4b83ff 5.1%, #2d55a9 51.64%, #2c3b6e 98.45%) Header area background
--snf-content-bg $color-surface-default Content area background
--snf-placeholder-bg $color-surface-secondary Placeholder background

# Typography System

Name Default Description
--snf-teamname-font-size $font-size-xl Team name font size
--snf-teamname-font-weight $font-weight-bold Team name font weight
--snf-countdown-text-font-size $font-size-sm Countdown text font size
--snf-countdown-text-font-weight $font-weight-regular Countdown text font weight
--snf-content-text-align center Content text align
--snf-desc-font-size $font-size-lg Description font size
--snf-desc-font-weight $font-weight-bold Description font weight
--snf-tips-font-size $font-size-sm Tips font size
--snf-tips-font-weight $font-weight-regular Tips font weight
--snf-placeholder-font-size $font-size-md Placeholder font size
--snf-placeholder-font-weight $font-weight-regular Placeholder font weight
--snf-placeholder-icon-size 0.4rem Placeholder icon size
--snf-invite-button-font-size $font-size-lg Invite button font size

# Border Radius System

Name Default Description
--snf-header-wrap-border-radius $border-radius-sm Header wrapper border radius
--snf-content-border-radius $border-radius-sm Content area border radius
--snf-member-radius $border-radius-circle Member avatar container radius
--snf-avatar-radius $border-radius-circle Avatar border radius
--snf-placeholder-radius $border-radius-circle Placeholder border radius
--snf-invite-button-border-radius $border-radius-999 Invite button border radius

# Shadow System

Name Default Description
--snf-content-box-shadow inset 0 1px 1px #ecf3fa Content area shadow

# Others

Name Default Description
--snf-card-position relative Card position
--snf-header-position relative Header position
--snf-teamname-position relative Team name position
--snf-teamname-z-index 101 Team name z-index
--snf-countdown-wrap-position relative Countdown container position
--snf-countdown-wrap-z-index 101 Countdown container z-index
--snf-brand-position absolute Brand icon position
--snf-content-position relative Content area position
--snf-member-position relative Member avatar position
--snf-placeholder-position relative Placeholder position
--snf-content-backdrop-filter blur(13.5914px) Content backdrop filter
--snf-members-columns 6 Members grid columns

← MatchScheduleNotKickoff →