Press Next

# MatchMessagesSignin AI Match Team Sign-in Component

AI match team sign-in component for displaying team sign-in status, including sign-in statistics and detailed sign-in information for each team.

# Usage

import PressMatchMessagesSignin from "press-next/press-match-messages-signin/press-match-messages-signin";

# Basic Usage

<template>
  <PressMatchMessagesSignin :content="content" />
</template>

<script setup lang="ts">
import PressMatchMessagesSignin from "press-next/press-match-messages-signin/press-match-messages-signin";
import type { SigninContent } from "press-next/press-match-messages-signin/demo-data";

const content: SigninContent = {
  info: {
    min: 8,
    max: 16,
    text: ' teams signed in',
  },
  items: [
    { id: 1, title: 'Honor of Kings Team', time: '14:30 Sign-in', status: 'Signed in' },
    { id: 2, title: 'League of Legends Team', time: '14:25 Sign-in', status: 'Signed in' },
    { id: 3, title: 'PUBG Mobile Team', time: '14:20 Sign-in', status: 'Signed in' },
  ],
};
</script>

# API

# Props

Attribute Description Type Default
content Sign-in content SigninContent -

# SigninContent Type

Property Description Type
info Sign-in info SigninInfo
items Sign-in items SigninItem[]

# SigninInfo Type

Property Description Type
min Signed-in count number
max Total team count number
text Description text string

# SigninItem Type

Property Description Type
id Item ID string | number
title Team name string
time Sign-in time string
status Sign-in status string

# Theme Customization

The component provides the following CSS variables, which can be used to customize styles. Please refer to the ConfigProvider component for usage.

# Style Variables

Name Default Value Description
--pmm-signin-spacing-sm .16rem Small spacing
--pmm-signin-spacing-md .24rem Medium spacing
--pmm-signin-padding .24rem Padding
--pmm-signin-status-width 1.12rem Status width
--pmm-signin-status-height .42rem Status height
--pmm-signin-bg #fff Component background
--pmm-signin-border-color rgba(211, 212, 252, 0.48) Border color
--pmm-signin-text-color #212124 Primary text color
--pmm-signin-sub-color rgba(33, 33, 36, 0.75) Secondary text color
--pmm-signin-purple-color #5300c3 Purple text color
--pmm-signin-status-bg rgba(255, 191, 0, 0.3) Status background
--pmm-signin-status-color #ed7b2f Status text color
--pmm-signin-font-size .24rem Font size
--pmm-signin-font-size-sm .2rem Small font size
--pmm-signin-line-height 1.5 Line height
--pmm-signin-radius .08rem Border radius
--pmm-signin-border-width .02rem Border width
--pmm-signin-clip-path-offset .07rem Clip path offset

← MatchMessagesTemplate →