Press Next

# MatchMessagesCommon AI Match Common Panel Component

AI match common panel component for displaying label-value pairs information list, suitable for match information, user information and other scenarios.

# Usage

import PressMatchMessagesCommon from "press-next/press-match-messages-common/press-match-messages-common";

# Basic Usage

<template>
  <PressMatchMessagesCommon :items="items" />
</template>

<script setup lang="ts">
import PressMatchMessagesCommon from "press-next/press-match-messages-common/press-match-messages-common";
import type { CommonItem } from "press-next/press-match-messages-common/demo-data";

const items: CommonItem[] = [
  { label: "Match Name", value: "Honor of Kings Spring Tournament" },
  { label: "Match Time", value: "March 15, 2024 14:00" },
  { label: "Match Location", value: "Online Match" },
  { label: "Participants", value: "32 players" },
  { label: "Match Format", value: "BO3 Single Elimination" },
];
</script>

# API

# Props

Attribute Description Type Default
items Information items CommonItem[] []

# CommonItem Type

Property Description Type
label Label text string
value Value text 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-common-spacing-sm .16rem Small spacing
--pmm-common-spacing-md .24rem Medium spacing
--pmm-common-padding .24rem Padding
--pmm-common-label-min-width 1.2rem Label minimum width
--pmm-common-label-color rgba(33, 33, 36, 0.6) Label text color
--pmm-common-content-color #212124 Content text color
--pmm-common-font-size .24rem Font size
--pmm-common-label-font-weight 400 Label font weight
--pmm-common-content-font-weight 400 Content font weight
--pmm-common-line-height 1.5 Line height
--pmm-common-radius .08rem Border radius

← MatchMessagesCtrls →