Press Next

# MatchMessagesMap AI Match Map Selection Component

AI match map selection component for displaying different game map options with horizontal scrolling and map selection functionality.

# Usage

import PressMatchMessagesMap from "press-next/press-match-messages-map/press-match-messages-map";

# Basic Usage

<template>
  <PressMatchMessagesMap
    :map-list="mapList"
    @map-selected="handleMapSelected"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesMap from "press-next/press-match-messages-map/press-match-messages-map";
import type { MapItem } from "press-next/press-match-messages-map/demo-data";

const mapList: MapItem[] = [
  {
    id: 1,
    name: "Summoner's Rift",
    image: "https://game.gtimg.cn/images/lol/act/img/map/map1.jpg",
    description: "Classic 5v5 map",
    selected: true,
  },
  {
    id: 2,
    name: "Howling Abyss",
    image: "https://game.gtimg.cn/images/lol/act/img/map/map2.jpg",
    description: "ARAM map",
    selected: false,
  },
];

const handleMapSelected = (map: MapItem) => {
  console.log("Selected map:", map);
};
</script>

# API

# Props

Attribute Description Type Default
map-list Map option list MapItem[] []

# Events

Event Description Parameters
map-selected Select map option map: MapItem Map item

# MapItem Type

Property Description Type
id Unique ID string | number
name Map name string
image Map image string
description Map description string
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-map-spacing-sm .16rem Small spacing
--pmm-map-spacing-md .24rem Medium spacing
--pmm-map-item-padding .16rem Item padding
--pmm-map-item-width 2.4rem Item width
--pmm-map-item-height 1.6rem Item image height
--pmm-map-icon-size .32rem Selected icon size
--pmm-map-item-bg #fff Item background color
--pmm-map-selected-bg rgba(211, 212, 252, 0.48) Selected background color
--pmm-map-item-border rgba(211, 212, 252, 0.48) Item border color
--pmm-map-item-selected-border #9a86fe Selected border color
--pmm-map-text-color #483081 Primary text color
--pmm-map-secondary-text-color #666 Secondary text color
--pmm-map-font-size .24rem Primary font size
--pmm-map-secondary-font-size .2rem Secondary font size
--pmm-map-font-weight 600 Font weight
--pmm-map-item-radius .08rem Item border radius

← MatchMessagesMode →