Press Next

# PressmatchMessagesGrouping AI Match Intelligent Grouping Component

AI match intelligent grouping component for displaying intelligent grouping results, including group information, team count, and grouping evaluation.

# Usage

import PressPressmatchMessagesGrouping from "press-next/press-pressmatch-messages-grouping/press-pressmatch-messages-grouping";

# Basic Usage

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

<script setup lang="ts">
import PressPressmatchMessagesGrouping from "press-next/press-pressmatch-messages-grouping/press-pressmatch-messages-grouping";
import type { GroupingContent } from "press-next/press-pressmatch-messages-grouping/demo-data";

const content: GroupingContent = {
  text: "AI intelligent grouping completed",
  items: [
    { id: 1, title: "Group A", num: 8 },
    { id: 2, title: "Group B", num: 8 },
    { id: 3, title: "Group C", num: 8 },
    { id: 4, title: "Group D", num: 8 },
  ],
  describe: "This grouping is based on player strength assessment, with average score difference controlled within",
  score: 150,
};
</script>

# API

# Props

Attribute Description Type Default
content Grouping content GroupingContent -

# GroupingContent Type

Property Description Type
text Title text string
items Grouping items GroupingItem[]
describe Description text string
score Assessment score number

# GroupingItem Type

Property Description Type
id Item ID string | number
title Group name string
num Team count number

# 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-grouping-spacing-sm .16rem Small spacing
--pmm-grouping-spacing-md .24rem Medium spacing
--pmm-grouping-spacing-lg .32rem Large spacing
--pmm-grouping-item-width 1.16rem Item width
--pmm-grouping-item-height 1.2rem Item height
--pmm-grouping-item-title-height .4rem Item title height
--pmm-grouping-item-bg rgba(211, 212, 252, 0.5) Item background
--pmm-grouping-font-color1 rgba(33, 33, 36, 0.75) Normal text color
--pmm-grouping-font-color2 #483081 Emphasis color
--pmm-grouping-font-color3 rgba(72, 48, 129, 0.6) Secondary color
--pmm-grouping-font-size-sm .2rem Small font size
--pmm-grouping-font-size-md .24rem Normal font size
--pmm-grouping-font-size-lg .28rem Large font size
--pmm-grouping-font-size-xl .36rem Score font size
--pmm-grouping-radius .08rem Border radius

← MatchMessagesInform →