Press Next

# MatchMessagesInform AI Match Schedule Notification Component

AI match schedule notification component for displaying match information and notification settings switches.

# Import

import PressMatchMessagesInform from "press-next/press-match-messages-inform/press-match-messages-inform";

# Usage

# Basic Usage

<template>
  <PressMatchMessagesInform
    :content="content"
    @inform-change="handleInformChange"
  />
</template>

<script setup lang="ts">
import type {
  InformContent,
  InformItem,
} from "press-next/press-match-messages-inform/demo-data";

const content: InformContent = {
  title: "2024 Spring E-sports League Finals",
  time: "April 15, 2024 14:00-18:00",
  addr: "Tencent Binhai Building B2 E-sports Hall",
  items: [
    {
      id: 1,
      title: "Match Start Reminder",
      state: true,
      icon: "icon-bell",
      type: "start",
    },
    {
      id: 2,
      title: "Match Result Notification",
      state: false,
      icon: "icon-trophy",
      type: "result",
    },
  ],
};

const handleInformChange = (item: InformItem) => {
  console.log("Notification setting changed:", item);
};
</script>

# API

# Props

Attribute Description Type Default
content Notification content InformContent -

# Events

Event Description Parameters
inform-change Triggered when notification setting changes InformItem

# InformContent Type

interface InformContent {
  title: string; // Match title
  time: string; // Match time
  addr: string; // Match venue
  items: InformItem[]; // Notification items list
}

# InformItem Type

interface InformItem {
  id: string | number; // Unique identifier
  title: string; // Notification item title
  state: boolean; // Switch state
  icon: string; // IconPlus class name
  type: string; // Notification type
}

# 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-inform-spacing-sm .16rem Small spacing
--pmm-inform-spacing-md .24rem Medium spacing
--pmm-inform-spacing-lg .4rem Large spacing
--pmm-inform-item-height .88rem Switch item height
--pmm-inform-info-height .44rem Info item height
--pmm-inform-icon-width .48rem IconPlus width
--pmm-inform-info-bg rgba(211, 212, 252, .48) Info background color
--pmm-inform-border-color rgba(211, 212, 252, .48) Border color
--pmm-inform-main-color #212124 Main text color
--pmm-inform-sub-color rgba(33, 33, 36, .75) Secondary text color
--pmm-inform-font-size .24rem Font size
--pmm-inform-icon-size .28rem IconPlus font size
--pmm-inform-radius .08rem Border radius
--pmm-inform-border-width .02rem Border width

← MatchMessagesList →