Press Next

# MatchScheduleTitle

Top title component for match end status, displaying decoration bar and status tag. Supports multiple status styles including champion, runner-up, third place, advance, ranking, etc.

# Features

  • πŸ† Multi-status Support - Supports 9 states: champion, runner-up, third place, advance, etc.
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • πŸ’¬ Custom Text - Support custom status text
  • 🎯 Exquisite Style - Trapezoidal clip-path cutting, outstanding visual effect
  • πŸ“± Responsive Design - Adapt to different screen sizes
  • ⚑ Lightweight & Efficient - Pure CSS implementation, excellent performance

# Use Cases

  • E-sports match result display
  • Sports event ranking display
  • Team competition result announcement
  • Online competitive status identification

# Import

import PressMatchScheduleTitle from 'press-next/press-match-schedule-title/press-match-schedule-title';

# Code Demo

# Basic Usage

Display advance status title.

<template>
  <PressMatchScheduleTitle status="advance" />
</template>

<script setup lang="ts">
import PressMatchScheduleTitle from 'press-next/press-match-schedule-title/press-match-schedule-title';
</script>

# Champion/Runner-up/Third Place Status

Display champion, runner-up, and third place status.

<template>
  <PressMatchScheduleTitle status="champion" />
  <PressMatchScheduleTitle status="runner-up" />
  <PressMatchScheduleTitle status="third-place" />
</template>

# Other Status

Display reached, not advance, ranking and other status.

<template>
  <PressMatchScheduleTitle status="reached" />
  <PressMatchScheduleTitle status="not-advance" />
  <PressMatchScheduleTitle status="number-place" />
  <PressMatchScheduleTitle status="placed-finished" />
</template>

# Custom Text

Customize status text via status-text prop.

<template>
  <PressMatchScheduleTitle 
    status="advance" 
    status-text="Custom Status Text" 
  />
</template>

# No Status

No status tag, only display decoration bar.

<template>
  <PressMatchScheduleTitle status="none" />
</template>

# Custom Theme

<template>
  <PressMatchScheduleTitle
    custom-class="my-custom-theme"
    status="champion"
  />
</template>

<style>
.my-custom-theme {
  --pst-bar-champion-bg: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  --pst-status-tag-champion-bg: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  --pst-status-tag-font-size: 0.32rem;
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
status Match status StatusType 'advance'
status-text Status text, can be customized string ''

# StatusType

type StatusType = 
  | 'champion'        // Champion
  | 'runner-up'       // Runner-up
  | 'third-place'     // Third place
  | 'reached'         // Reached xx round
  | 'advance'         // Advance
  | 'not-advance'     // Not advance
  | 'number-place'    // xxth place
  | 'placed-finished' // xx-xx place
  | 'none';           // No status

# Status Description

Status Display Text Bar Color Tag Color
champion Champion Gold (#ffdb4b) Gold (#ffdb4b)
runner-up Runner-up Silver (#b1c0c8) Silver (#b1c0c8)
third-place Third place Bronze (#daa47b) Bronze (#daa47b)
reached Reached xx Purple (#e38ce9) Purple (#e38ce9)
advance Advance Blue (#d4e2ff) Blue (#d4e2ff)
not-advance Not advance Gray (#eaeff2) Gray (#eaeff2)
number-place xxth place Gray (#eaeff2) Gray (#eaeff2)
placed-finished xx-xx place Gray (#eaeff2) Gray (#eaeff2)
none - Light blue (#d3d4fc) Not display

# Notes

# Usage Recommendations

  1. Status Text: Use passed status-text first, calculate automatically based on status if not passed
  2. Custom Style: Use custom-class with CSS variables for theme customization
  3. Visual Hierarchy: Keep bar and status tag colors consistent to enhance visual recognition
  4. Trapezoidal Cut: Status tag uses clip-path to achieve trapezoidal effect, enhancing visual appeal

# Performance Optimization

  • Pure CSS implementation, no JS calculation overhead
  • Use CSS variables for easy theme switching
  • Support v-if to control tag display, reduce DOM nodes

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms
  • clip-path requires browser support (not supported in IE)

# Theme Customization

# Style Variables

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

# Spacing System

Name Default Description
--pst-status-tag-margin-top -0.02rem Status tag top margin
--pst-status-tag-margin-left auto Status tag left margin
--pst-status-tag-margin-right auto Status tag right margin

# Box Model System

Name Default Description
--pst-card-width 100% Component width
--pst-bar-width 100% Bar width
--pst-bar-height 0.08rem Bar height
--pst-status-tag-width 2rem Status tag width
--pst-status-tag-height 0.56rem Status tag height

# Color System

Name Default Description
--pst-status-tag-color $color-text-primary Status tag text color
--pst-bar-none-bg $color-surface-brand-light2 None status bar background
--pst-bar-champion-bg #ffdb4b Champion bar background
--pst-bar-runner-up-bg #b1c0c8 Runner-up bar background
--pst-bar-third-place-bg #daa47b Third place bar background
--pst-bar-reached-bg #e38ce9 Reached bar background
--pst-bar-advance-bg #d4e2ff Advance bar background
--pst-bar-not-advance-bg #eaeff2 Not advance bar background
--pst-bar-number-place-bg #eaeff2 Number place bar background
--pst-bar-placed-finished-bg #eaeff2 Placed finished bar background
--pst-status-tag-champion-bg #ffdb4b Champion tag background
--pst-status-tag-runner-up-bg #b1c0c8 Runner-up tag background
--pst-status-tag-third-place-bg #daa47b Third place tag background
--pst-status-tag-reached-bg #e38ce9 Reached tag background
--pst-status-tag-advance-bg #d4e2ff Advance tag background
--pst-status-tag-not-advance-bg #eaeff2 Not advance tag background
--pst-status-tag-number-place-bg #eaeff2 Number place tag background
--pst-status-tag-placed-finished-bg #eaeff2 Placed finished tag background

# Typography System

Name Default Description
--pst-status-tag-font-size $font-size-md Status tag font size
--pst-status-tag-font-weight $font-weight-bold Status tag font weight

# Border Radius System

Name Default Description
--pst-bar-border-top-left-radius $border-radius-sm Bar top left radius
--pst-bar-border-top-right-radius $border-radius-sm Bar top right radius
--pst-status-tag-radius 0 Status tag border radius

# Others

Name Default Description
--pst-card-position relative Component position
--pst-bar-position relative Bar position
--pst-status-tag-position relative Status tag position
--pst-status-tag-clip-path polygon(0 0, 100% 0, 85% 100%, 15% 100%) Status tag clip path (trapezoidal effect)

← MatchSetAwardPopup β†’