Press Next

# MatchMessagesMode AI Match Mode Selection Component

AI match mode selection component for displaying different competition mode options with 2x2 grid layout.

# Usage

import PressMatchMessagesMode from "press-next/press-match-messages-mode/press-match-messages-mode";

# Basic Usage

<template>
  <PressMatchMessagesMode
    :mode-list="modeList"
    :title="title"
    @mode-click="handleModeClick"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesMode from "press-next/press-match-messages-mode/press-match-messages-mode";
import type { ModeItem } from "press-next/press-match-messages-mode/demo-data";

const title = "Select Competition Mode";

const modeList: ModeItem[] = [
  { id: 1, name: "Quick Mode", description: "Quick match creation" },
  { id: 2, name: "Custom Mode", description: "Custom match settings" },
  { id: 3, name: "Template Mode", description: "Use preset templates" },
  { id: 4, name: "Advanced Mode", description: "Advanced match configuration" },
];

const handleModeClick = (mode: ModeItem) => {
  console.log("Selected mode:", mode);
};
</script>

# API

# Props

Attribute Description Type Default
mode-list Mode option list ModeItem[] []
title Title text string ''

# Events

Event Description Parameters
mode-click Click mode option mode: ModeItem Mode item

# ModeItem Type

Property Description Type
id Unique ID string | number
name Mode name string
description Description 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-mode-spacing-sm .16rem Small spacing
--pmm-mode-spacing-md .24rem Medium spacing
--pmm-mode-item-padding .2rem .28rem Item padding
--pmm-mode-item-height .72rem Item height
--pmm-mode-item-bg rgba(211, 212, 252, 0.5) Item background color
--pmm-mode-item-color #483081 Item text color
--pmm-mode-title-color #212124 Title text color
--pmm-mode-item-font-size .24rem Item font size
--pmm-mode-title-font-size .24rem Title font size
--pmm-mode-item-radius .08rem Item border radius

← MatchMessagesPoster →