Press Next

# MatchMessagesRounds AI Match Rounds Adjustment Component

AI match rounds adjustment component for selecting different match formats (BO1, BO3, BO5, etc.) with selection state and tip information display.

# Usage

import PressMatchMessagesRounds from "press-next/press-match-messages-rounds/press-match-messages-rounds";

# Basic Usage

<template>
  <PressMatchMessagesRounds
    :rounds="rounds"
    :tip="tip"
    @round-selected="handleRoundSelected"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesRounds from "press-next/press-match-messages-rounds/press-match-messages-rounds";
import type { RoundItem } from "press-next/press-match-messages-rounds/demo-data";

const rounds: RoundItem[] = [
  { value: "BO1", selected: false },
  { value: "BO3", selected: true },
  { value: "BO5", selected: false },
  { value: "BO7", selected: false },
];

const tip = "BO3 means best of 3, BO5 means best of 5";

const handleRoundSelected = (round: RoundItem) => {
  console.log("Selected round:", round);
};
</script>

# API

# Props

Attribute Description Type Default
rounds Round options RoundItem[] []
tip Tip message string ''

# Events

Event Description Parameters
round-selected Select round option round: RoundItem Round item

# RoundItem Type

Property Description Type
value Round value string | number
selected Is selected boolean

# 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-rounds-spacing-sm .08rem Small spacing
--pmm-rounds-spacing-md .24rem Medium spacing
--pmm-rounds-item-gap .34rem Item gap
--pmm-rounds-item-width .8rem Item width
--pmm-rounds-item-height .8rem Item height
--pmm-rounds-tip-icon-size .32rem Tip icon size
--pmm-rounds-item-bg rgba(211, 212, 252, 0.48) Item background
--pmm-rounds-item-color #483081 Item text color
--pmm-rounds-item-selected-bg linear-gradient(354deg, #966ffb 0%, #6736f3 100%) Selected item background
--pmm-rounds-item-selected-color #fff Selected item text color
--pmm-rounds-tip-bg rgba(237, 123, 47, 0.1) Tip background
--pmm-rounds-tip-color #ed7b2f Tip text color
--pmm-rounds-font-size .28rem Item font size
--pmm-rounds-font-weight 700 Item font weight
--pmm-rounds-tip-font-size .24rem Tip font size
--pmm-rounds-tip-font-weight 400 Tip font weight
--pmm-rounds-item-radius .08rem Item border radius

← MatchMessagesSignin →