Press Next

# MatchTeamItem Team Item

Team item component for displaying team information including team name, member list, captain badge, etc. Supports automatic add button control, captain badge, member click events, and more.

# Import

import PressMatchTeamItem from 'press-next/press-match-team-item/press-match-team-item.vue';

# Code Demo

# Basic Usage

Display basic team information including team name and member list.

<template>
  <PressMatchTeamItem
    team-name="Team Name"
    :members="members"
    :max-members="5"
    add-button-text="Apply to Join"
    @member-click="handleMemberClick"
    @add-click="handleAddClick"
  />
</template>

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

interface TeamMember {
  id: string | number;
  name: string;
  avatar: string;
  isCaptain?: boolean;
  icon?: string;
}

const members = ref<TeamMember[]>([
  {
    id: 1,
    name: 'Captain',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    isCaptain: true,
  },
  {
    id: 2,
    name: 'Member 1',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 3,
    name: 'Member 2',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
]);

const handleMemberClick = (member: TeamMember, index: number) => {
  console.log('Member clicked:', member, 'Index:', index);
};

const handleAddClick = () => {
  console.log('Add button clicked');
};
</script>

# Full Team

When the number of members reaches or exceeds 6, the add button is automatically hidden.

<template>
  <PressMatchTeamItem
    team-name="Full Team"
    :members="fullMembers"
    :max-members="6"
  />
</template>

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

const fullMembers = ref([
  { id: 1, name: 'Captain', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', isCaptain: true },
  { id: 2, name: 'Member 1', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 3, name: 'Member 2', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 4, name: 'Member 3', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 5, name: 'Member 4', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 6, name: 'Member 5', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);
</script>

# Empty Team

Display empty team state with add button to guide users to join.

<template>
  <PressMatchTeamItem
    team-name="New Team"
    :members="[]"
    :max-members="5"
    add-button-text="Join Now"
    @add-click="handleJoin"
  />
</template>

<script setup lang="ts">
import PressMatchTeamItem from 'press-next/press-match-team-item/press-match-team-item.vue';

const handleJoin = () => {
  console.log('Join team now');
};
</script>

# Actionable Team

Team card with checkbox selection functionality.

<template>
  <PressMatchTeamItem
    team-name="Selectable Team"
    team-type="action"
    :members="members"
    :checked="isChecked"
    :icon-size="16"
    @checkbox-change="handleCheckboxChange"
  />
</template>

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

const isChecked = ref(false);
const members = ref([
  { id: 1, name: 'Captain', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', isCaptain: true },
  { id: 2, name: 'Member 1', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleCheckboxChange = (checked: boolean) => {
  isChecked.value = checked;
  console.log('Checkbox state:', checked);
};
</script>

# API

# Props

Attribute Description Type Default
team-name Team name string 阵营名称有八个字
team-type Team type, shows checkbox when set to action string -
members Member list TeamMember[] []
max-members Maximum members, shows add button when less than 6 number 6
add-button-text Add button text string 等你加入
checked Checkbox checked state (only when team-type="action") boolean false
icon-size Checkbox icon size (only when team-type="action") number 14
custom-class Custom class name string -

# TeamMember Data Structure

Key Description Type Required
id Member ID string | number No
name Member name string Yes
avatar Member avatar URL string Yes
isCaptain Whether is captain boolean No
icon IconPlus URL next to member name string No

# Events

Event Description Arguments
member-click Emitted when member is clicked member: TeamMember, index: number
add-click Emitted when add button is clicked -
checkbox-change Emitted when checkbox state changes checked: boolean

# 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
--pmti-header-padding-lr $spacing-lg Header horizontal padding
--pmti-header-right-mr $spacing-md Header right margin
--pmti-content-padding $spacing-xl $spacing-lg Content area padding
--pmti-member-gap $spacing-md Member spacing
--pmti-add-btn-text-mt .16rem Add button text top margin
--pmti-member-avatar-mt $spacing-xs Member avatar top margin

# Size System

Name Default Value Description
--pmti-container-height auto Container height
--pmti-header-height .72rem Header height
--pmti-header-title-max-width 3rem Header title max width
--pmti-member-avatar-size .8rem Member avatar size
--pmti-member-name-icon-size .28rem Member name icon size
--pmti-captain-badge-size .24rem Captain badge size
--pmti-add-btn-size .8rem Add button size

# Color System

Name Default Value Description
--pmti-container-bg #fff Container background
--pmti-header-bg $color-divider-light Header background
--pmti-header-left-bg $color-surface-brand-light2 Header left background
--pmti-header-title-color $color-text-primary Header title color
--pmti-header-icon-color $color-text-primary Header icon color
--pmti-member-avatar-border-color $color-border-primary Member avatar border color
--pmti-member-name-color $color-text-invert-dark Member name color
--pmti-captain-badge-bg $color-surface-brand Captain badge background
--pmti-captain-badge-color $color-text-invert-light Captain badge text color
--pmti-add-btn-bg $color-divider-light Add button background
--pmti-add-btn-border-color $color-divider-default Add button border color
--pmti-add-btn-icon-color $color-border-secondary Add button icon color
--pmti-add-btn-text-color $color-text-invert-default Add button text color

# Typography System

Name Default Value Description
--pmti-header-title-font-size $font-size-md Header title font size
--pmti-header-title-font-weight $font-weight-bold Header title font weight
--pmti-header-icon-font-size $font-size-xl Header icon font size
--pmti-member-name-font-size $font-size-xs Member name font size
--pmti-captain-badge-icon-font-size $font-size-xs Captain badge icon font size
--pmti-add-btn-icon-font-size .4rem Add button icon font size
--pmti-add-btn-text-font-size $font-size-xs Add button text font size

# Border Radius System

Name Default Value Description
--pmti-container-border-radius $border-radius-sm Container border radius
--pmti-member-avatar-border-radius $border-radius-circle Member avatar border radius
--pmti-captain-badge-border-radius $border-radius-circle Captain badge border radius
--pmti-add-btn-border-radius $border-radius-circle Add button border radius

# FAQ

# How to control the display of the add button?

The add button display is automatically controlled by the max-members property:

  • When max-members < 6, the add button is automatically displayed
  • When max-members >= 6, the add button is automatically hidden
  • When the add button is displayed, one position is reserved for it, and the actual number of members displayed is max-members - 1

# How to identify the captain?

Set isCaptain: true in the member data to display the captain badge:

const members = [
  {
    id: 1,
    name: 'Captain',
    avatar: 'https://example.com/avatar.jpg',
    isCaptain: true, // Display captain badge
  },
];

# How to customize the icon next to member name?

Add the icon field to the member data:

const members = [
  {
    id: 1,
    name: 'Special Member',
    avatar: 'https://example.com/avatar.jpg',
    icon: 'https://example.com/icon.png', // IconPlus displayed next to member name
  },
];

# How to implement team selection functionality?

Set team-type="action" and listen to the checkbox-change event:

<template>
  <PressMatchTeamItem
    team-type="action"
    :checked="isChecked"
    @checkbox-change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isChecked = ref(false);

const handleChange = (checked: boolean) => {
  isChecked.value = checked;
};
</script>

← MatchTeamList →