Press Next

# MatchGroupingItem Grouping Card

A grouping card component for displaying group information, supporting member avatar display and action buttons, suitable for competition grouping, team display and other scenarios.

# Import

import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

# Code Demo

# Basic Usage

Display basic group information including group name, member avatar list and action button.

<template>
  <PressMatchGroupingItem
    group-name="Group 1"
    :members="memberList"
    :show-action="true"
    action-text="Start Match"
    @action-click="handleActionClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

interface Member {
  id: string | number;
  name: string;
  avatar?: string;
}

const memberList = ref<Member[]>([
  {
    id: 1,
    name: 'John',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 2,
    name: 'Jane',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 3,
    name: 'Bob',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
]);

const handleActionClick = () => {
  console.log('Start match');
};
</script>

# Without Action Button

Display group information without action button.

<template>
  <PressMatchGroupingItem
    group-name="Group 2"
    :members="memberList"
    :show-action="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: 'John', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: 'Jane', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);
</script>

# Custom Button Text

Customize the text content of the action button.

<template>
  <PressMatchGroupingItem
    group-name="Group 3"
    :members="memberList"
    :show-action="true"
    action-text="View Details"
    @action-click="handleViewDetail"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: 'John', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: 'Jane', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleViewDetail = () => {
  console.log('View details');
};
</script>

# Custom Action Buttons

Customize the action button area through slots, allowing multiple buttons or other content.

<template>
  <PressMatchGroupingItem
    group-name="Group 4"
    :members="memberList"
  >
    <template #ctrls-btn>
      <PressButton
        type="default"
        size="small"
        style="margin-right: 8px;"
        @click="handleEdit"
      >
        Edit
      </PressButton>
      <PressButton
        type="primary"
        size="small"
        @click="handleStart"
      >
        Start Match
      </PressButton>
    </template>
  </PressMatchGroupingItem>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';
import { PressButton } from 'press-ui';

const memberList = ref([
  { id: 1, name: 'John', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: 'Jane', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleEdit = () => {
  console.log('Edit group');
};

const handleStart = () => {
  console.log('Start match');
};
</script>

# Custom Styling

Customize component styles through CSS variables.

<template>
  <PressMatchGroupingItem
    group-name="Custom Style Group"
    :members="memberList"
    :show-action="true"
    action-text="Start Match"
    customl-class="my-grouping-item"
    @action-click="handleActionClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: 'John', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: 'Jane', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleActionClick = () => {
  console.log('Start match');
};
</script>

<style>
.my-grouping-item {
  --pmgi-header-bg: #f0f9ff;
  --pmgi-header-title-color: #0369a1;
  --pmgi-avatar-size: 1.2rem;
  --pmgi-card-border-radius: .16rem;
}
</style>

# API

# Props

Attribute Description Type Default
customl-class Custom class name string -
group-name Group name string -
members Member list Member[] []
show-action Whether to show action button boolean false
action-text Action button text string '开始比赛'

# Member Data Structure

Property Description Type Required
id Member ID string | number Yes
name Member name string Yes
avatar Member avatar URL string No

# Events

Event Description Callback Parameters
action-click Emitted when action button is clicked -

# Slots

Name Description
ctrls-btn Custom action button area

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Style Variables

# Spacing System

Name Default Value Description
--pmgi-list-gap $spacing-md Avatar list gap
--pmgi-header-padding-lr $spacing-lg Header horizontal padding
--pmgi-header-right-mr $spacing-lg Header right margin
--pmgi-body-padding-tb $spacing-xl Body vertical padding
--pmgi-body-padding-lr $spacing-lg Body horizontal padding
--pmgi-ctrls-mt $spacing-lg Control button top margin

# Size System

Name Default Value Description
--pmgi-card-min-height 1.44rem Card minimum height
--pmgi-avatar-size 1rem Avatar size
--pmgi-header-title-max-width 3rem Header title max width
--pmgi-header-height .72rem Header height
--pmgi-ctrls-btn-width 3.2rem Control button width

# Color System

Name Default Value Description
--pmgi-bg-color $color-surface-default Background color
--pmgi-card-border-color none Border color
--pmgi-info-text-color $color-text-secondary Info text color
--pmgi-header-bg $color-divider-light Header background color
--pmgi-header-left-bg $color-surface-brand-light2 Header left background color
--pmgi-header-title-color $color-text-primary Header title color
--pmgi-header-icon-color $color-text-primary Header icon color
--pmgi-avatar-border-color $color-divider-light Member avatar border color
--pmgi-avatar-bg-color $color-surface-default Member avatar background color

# Typography System

Name Default Value Description
--pmgi-header-title-font-size $font-size-md Header title font size
--pmgi-header-title-font-weight $font-weight-bold Header title font weight
--pmgi-header-icon-font-size $font-size-xl Header icon font size
--pmgi-info-font-size $font-size-sm Info font size

# Border Radius System

Name Default Value Description
--pmgi-card-border-radius .12rem Card border radius
--pmgi-avatar-border-radius 50% Avatar border radius

# Shadow System

Name Default Value Description
--pmgi-card-shadow none Card shadow

# Others

Name Default Value Description
--pmgi-header-clip-path polygon(0 0, calc(100% - 12px) 0, 100% 100%, 100% 100%, 0 100%) Card clip path

# FAQ

# How to customize action buttons?

Use the ctrls-btn slot to fully customize the action button area:

<template>
  <PressMatchGroupingItem :members="members">
    <template #ctrls-btn>
      <PressButton @click="handleCustomAction">
        Custom Button
      </PressButton>
    </template>
  </PressMatchGroupingItem>
</template>

# How does the member avatar list scroll horizontally?

The component has built-in horizontal scrolling functionality. When there are many members, horizontal scrolling is automatically enabled, and the scrollbar is hidden to maintain aesthetics.

# How to modify the header clip path style?

You can customize the clip path shape of the header left side through the CSS variable --pmgi-header-clip-path:

.custom-grouping {
  --pmgi-header-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Remove clip path */
}

# How to display the total number of members?

The component automatically displays "共有X支队伍" (Total X teams) on the right side of the header, with the count automatically calculated based on the length of the members array.

← MatchJoinTeamPopup →