Press Next

# MatchMessagesCtrls AI Match Button Group Operation Component

AI match button group operation component for displaying a group of operation buttons, supporting custom button styles, icons, and click event handling.

# Usage

import PressMatchMessagesCtrls from "press-next/press-match-messages-ctrls/press-match-messages-ctrls";

# Basic Usage

<template>
  <PressMatchMessagesCtrls
    :content="content"
    :icon="icon"
    :bg-color="bgColor"
    @ctrls-button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesCtrls from "press-next/press-match-messages-ctrls/press-match-messages-ctrls";
import type {
  CtrlsContent,
  ButtonItem,
} from "press-next/press-match-messages-ctrls/demo-data";

const content: CtrlsContent = {
  ctrlsBtns: [
    {
      id: 1,
      buttonText: "Start Match",
      type: "primary",
      bgColor: "#5300c3",
      icon: "play",
    },
    {
      id: 2,
      buttonText: "Pause Match",
      type: "default",
      bgColor: "#ff6b00",
      icon: "pause",
    },
  ],
};

const icon = "setting";
const bgColor = "#5300c3";

const handleButtonClick = (payload: { btn: ButtonItem; index: number }) => {
  console.log("Button clicked:", payload);
};
</script>

# API

# Props

Attribute Description Type Default
content Button group content CtrlsContent -
icon Default button icon string -
bgColor Default button color string -

# Events

Event Name Description Parameters
ctrls-button-click Button click { btn: ButtonItem, index: number }

# CtrlsContent Type

Property Description Type
ctrlsBtns Button list ButtonItem[]

# ButtonItem Type

Property Description Type
buttonText Button text string
id Button ID string | number
bgColor Button color string
type Button type 'primary' | 'default'
icon Button icon 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-ctrls-gap .24rem Button spacing

← MatchMessagesGrouping →