Press Next

# MatchDocs 赛事规则文档

用于展示赛事规则、比赛流程等文档内容，支持多个规则条目的展示。

# 引入

import PressMatchDocs from 'press-next/press-match-docs/press-match-docs';

# 代码演示

# 基础用法

<template>
  <PressMatchDocs :items="items" />
</template>

<script setup lang="ts">
import PressMatchDocs from 'press-next/press-match-docs/press-match-docs';

const items = [
  {
    title: '海选赛',
    content: '海选赛期间，每周一至周四为当周场次报名时间...',
  },
  {
    title: '复赛',
    content: '复赛将于海选赛结束后的一周内举行...',
  },
  {
    title: '决赛',
    content: '决赛定于复赛后的第三周举办...',
  },
];
</script>

# 自定义样式

通过 custom-class 属性可以自定义组件样式。

<template>
  <PressMatchDocs :items="items" custom-class="my-docs" />
</template>

<style>
.my-docs {
  --pmd-indicator-color: #ff6b00;
  --pmd-title-color: #333;
}
</style>

# API

# Props

参数 说明 类型 默认值
items 文档条目列表 DocItem[] []
custom-class 自定义样式类名 string ''

# DocItem 数据结构

参数 说明 类型
title 条目标题 string
content 条目内容 string

# Events

事件名 说明 参数
- - -

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmd-section-gap $spacing-lg (.32rem) 章节间距
--pmd-header-gap $spacing-sm (.16rem) 标题区域间距
--pmd-content-mt $spacing-sm (.16rem) 内容上边距
--pmd-padding-lr $spacing-lg (.32rem) 左右内边距
--pmd-indicator-width .8rem 指示条宽度
--pmd-indicator-height .30rem 指示条高度
--pmd-indicator-color $color-text-brand 指示条颜色
--pmd-title-color $color-text-primary 标题颜色
--pmd-content-color $color-text-tertiary 内容颜色
--pmd-bg-color $color-surface-primary 背景颜色
--pmd-title-font-size $font-size-sm (.28rem) 标题字体大小
--pmd-title-font-weight $font-weight-bold 标题字体粗细
--pmd-title-line-height .4rem 标题行高
--pmd-content-font-size $font-size-xs (.24rem) 内容字体大小
--pmd-content-line-height .36rem 内容行高

← MatchEventsItem →