Press Next

# PressmMatchMessagesList AI 办赛信息列表

用于展示 AI 办赛相关的信息列表，支持标签-值的键值对展示形式。

# 引入

import PressPressmMatchMessagesList from "press-next/press-pressm-match-messages-list/press-pressm-match-messages-list";

# 代码演示

# 基础用法

<template>
  <PressPressmMatchMessagesList :items="matchItems" />
</template>

<script setup lang="ts">
const matchItems = [
  { label: "比赛赛制", value: "小组循环积分赛" },
  { label: "比赛类型", value: "团队赛（四人）" },
  { label: "比赛模式", value: "极速对决" },
  { label: "比赛地图", value: "海岛地图" },
  { label: "比赛局数", value: "5局" },
];
</script>

# API

# Props

参数 说明 类型 默认值
items 信息列表数据 MessageItem[] []

# MessageItem 类型

属性 说明 类型
label 标签名 string
value 值内容 string

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

名称 默认值 描述
--pmm-list-spacing-sm .16rem 小间距
--pmm-list-spacing-md .32rem 中等间距
--pmm-list-item-height .72rem 列表项高度
--pmm-list-primary-color #212124 主文字颜色
--pmm-list-secondary-color rgba(33, 33, 36, 0.6) 次文字颜色
--pmm-list-icon-color rgba(33, 33, 36, 0.75) 图标颜色
--pmm-list-font-size .24rem 文字字号
--pmm-list-icon-size .2rem 图标大小

← MatchMessagesMap →