Press Next

# MatchTeamInfoItem Team Info Card

A card component for displaying team information, supporting team logo, name, tags, member avatars, and application functionality.

# Import

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

# Code Examples

# Basic Usage

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  />
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
    'https://example.com/avatar3.png',
  ],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: 'Popular', type: 'primary' },
  { text: 'Beginner Friendly', type: 'warning' },
]);

const handleApply = (teamInfo) => {
  console.log('Apply to join team:', teamInfo);
};
</script>

# With Avatars Mode

Display team member avatar list, showing up to 5 avatars.

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  />
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
    'https://example.com/avatar3.png',
    'https://example.com/avatar4.png',
    'https://example.com/avatar5.png',
  ],
  currentMembers: 5,
  maxMembers: 10,
});

const tagItems = ref([
  { text: 'Popular' },
  { text: '5', type: 'quantity' },
]);

const handleApply = (teamInfo) => {
  console.log('Apply to join team:', teamInfo);
};
</script>

# Simple Mode

Display only member count information without avatar list and action button.

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="simple"
  />
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: 'Popular', type: 'primary' },
]);
</script>

# Custom Action Button

Customize the action button using slots.

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  >
    <template #action-btn>
      <PressButton
        type="success"
        size="small"
        @click="handleCustomApply"
      >
        Join Now
      </PressButton>
    </template>
  </PressMatchTeamInfoItem>
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
  ],
  currentMembers: 2,
  maxMembers: 5,
});

const tagItems = ref([
  { text: 'Popular', type: 'primary' },
]);

const handleApply = (teamInfo) => {
  console.log('Apply to join team:', teamInfo);
};

const handleCustomApply = () => {
  console.log('Custom apply logic');
};
</script>

# With Quantity Tag

Use quantity type tag to display member count with user icon.

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
  />
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  avatars: ['https://example.com/avatar1.png'],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: 'Popular', type: 'primary' },
  { text: '3', type: 'quantity' },
]);
</script>

# API

# Props

Attribute Description Type Default
team-info Team information object TeamInfo -
tag-items Tag list TagItem[] []
type Display type 'with-avatars' | 'simple' 'with-avatars'
custom-class Custom CSS class name string ''

# TeamInfo Data Structure

interface TeamInfo {
  id: string;
  name: string;
  logo: string;
  avatars?: string[];
  currentMembers: number;
  maxMembers: number;
}
Property Description Type Required
id Team ID string Yes
name Team name string Yes
logo Team logo URL string Yes
avatars Member avatar list string[] No
currentMembers Current member count number Yes
maxMembers Maximum member count number Yes

# TagItem Data Structure

interface TagItem {
  text: string;
  type?: 'default' | 'quantity';
}
Property Description Type Default
text Tag text string -
type Tag type, quantity type shows user icon 'default' | 'quantity' 'default'

# Events

Event Description Callback Parameters
apply Triggered when apply button is clicked teamInfo: TeamInfo

# Slots

Name Description Parameters
action-btn Custom action button -

# Theme Customization

# CSS Variables

The component provides the following CSS variables for custom styling.

# Spacing System

Name Default Description
--pmtii-container-padding-tb $spacing-lg Container top/bottom padding
--pmtii-container-padding-lr $spacing-lg Container left/right padding
--pmtii-container-gap $spacing-lg Container gap
--pmtii-tag-gap $spacing-xs Tag gap
--pmtii-tag-padding-lr $spacing-sm Tag horizontal padding
--pmtii-tag-margin-tb $spacing-sm Tag top/bottom margin
--pmtii-avatar-gap $spacing-sm Avatar gap
--pmtii-members-mr $spacing-sm Members list right margin
--pmtii-tag-icon-mr .04rem Tag icon right margin
--pmtii-action-offset-x .24rem Action button horizontal offset
--pmtii-action-offset-y .66rem Action button vertical offset

# Size System

Name Default Description
--pmtii-logo-size 1rem Logo size
--pmtii-tag-height .36rem Tag height
--pmtii-tag-max-width 2rem Tag max width
--pmtii-avatar-size .5rem Avatar size
--pmtii-tag-icon-size .24rem Tag icon size
--pmtii-name-width 3.88rem Name max width

# Color System

Name Default Description
--pmtii-container-bg $color-surface-default Container background
--pmtii-logo-bg-color $color-surface-default Logo background
--pmtii-logo-border-color $color-divider-light Logo border color
--pmtii-name-text-color $color-text-primary Team name color
--pmtii-tag-bg-color $color-divider-light Tag background
--pmtii-tag-text-color $color-text-secondary Default tag text color
--pmtii-avatar-border-color $color-divider-default Avatar border color
--pmtii-members-text-color $color-text-invert-default Member info color
--pmtii-members-label-color $color-text-brand Member count highlight color

# Font System

Name Default Description
--pmtii-name-font-size $font-size-md Team name font size
--pmtii-name-font-weight $font-weight-bold Team name font weight
--pmtii-tag-font-size $font-size-xs Tag font size
--pmtii-members-font-size $font-size-xs Member info font size

# Border Radius System

Name Default Description
--pmtii-logo-border-radius $border-radius-circle Logo border radius
--pmtii-tag-border-radius $border-radius-none Tag border radius
--pmtii-avatar-border-radius $border-radius-circle Avatar border radius

# Custom Style Example

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    class="custom-team-item"
  />
</template>

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

const teamInfo = ref({
  id: '1',
  name: 'Honor of Kings Team',
  logo: 'https://example.com/logo.png',
  avatars: ['https://example.com/avatar1.png'],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: 'Popular', type: 'primary' },
]);
</script>

<style scoped lang="scss">
.custom-team-item {
  --pmtii-container-bg: #f5f5f5;
  --pmtii-name-text-color: #1890ff;
  --pmtii-tag-bg-color: #e6f7ff;
  --pmtii-tag-text-color: #1890ff;
}
</style>

# Notes

  1. Component Dependencies:

    • Uses PressButton component from press-ui
    • Ensure press-ui is properly installed

  2. Display Modes:

    • with-avatars mode: Shows member avatar list and action button
    • simple mode: Hides avatar list and action button

  3. Avatar Display:

    • Maximum 5 member avatars displayed
    • Excess avatars indicated by member count text

  4. Tag Types:

    • default: Regular tag
    • quantity: Quantity tag with automatic user icon

  5. Style Isolation:

    • WeChat Mini Program uses styleIsolation: 'shared'
    • Consider style scope when customizing

# FAQ

# How to customize tag styles?

Customize tag background and text color using CSS variables:

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    class="custom-tags"
  />
</template>

<style scoped lang="scss">
.custom-tags {
  --pmtii-tag-bg-color: #e6f7ff;
  --pmtii-tag-text-color: #1890ff;
  --pmtii-tag-border-radius: 4px;
}
</style>

# How to hide the action button?

Use simple mode to hide the action button:

<PressMatchTeamInfoItem
  :team-info="teamInfo"
  type="simple"
/>

# How to handle apply logic?

Listen to the apply event and handle the logic in the callback:

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    @apply="handleApply"
  />
</template>

<script setup lang="ts">
const handleApply = async (teamInfo) => {
  try {
    // Call apply API
    await applyToJoinTeam(teamInfo.id);
    console.log('Application successful');
  } catch (error) {
    console.error('Application failed:', error);
  }
};
</script>

# How to customize action button text and style?

Use the action-btn slot to customize the button:

<PressMatchTeamInfoItem
  :team-info="teamInfo"
  @apply="handleApply"
>
  <template #action-btn>
    <PressButton
      type="success"
      size="small"
      @click="handleCustomApply"
    >
      Join Now
    </PressButton>
  </template>
</PressMatchTeamInfoItem>

← MatchTeamInfoList →