logo
English
导航

TeamMember

Introduction

The TeamMember component is used to display detailed information about team members, supporting the display of avatars, names, positions, description text, and social media links.

Component features:

  • Supports avatar image display
  • Can display name, position, and description text
  • Supports adding social media links
  • Provides multiple style customization options
  • Responsive design, adapts to different screen sizes
  • Can be used in combination to display a complete team

Basic Usage

The simplest team member information display:

张三's avatar

张三

产品设计师

专注于用户体验设计，拥有5年产品设计经验

---
/**
 * @component TeamMember.Basic
 *
 * @description
 * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member1',
});
---

<TeamMember
  name="张三"
  role="产品设计师"
  avatar={avatar}
  bio="专注于用户体验设计，拥有5年产品设计经验"
/>

Add social media links through the socialLinks property:

李四's avatar

李四

高级开发工程师

全栈开发专家，热爱开源项目，专注于前端框架和性能优化

---
/**
 * @component TeamMember.WithSocial
 *
 * @description
 * 带社交媒体链接的团队成员展示组件示例，展示如何添加社交媒体链接。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member2',
});
---

<TeamMember
  name="李四"
  role="高级开发工程师"
  avatar={avatar}
  bio="全栈开发专家，热爱开源项目，专注于前端框架和性能优化"
  socialLinks={[
    { platform: 'github', url: 'https://github.com' },
    { platform: 'twitter', url: 'https://twitter.com' },
    { platform: 'linkedin', url: 'https://linkedin.com' },
  ]}
/>

Custom Styling

Use the class property to customize the member card style:

王五's avatar

王五

市场总监

负责产品市场策略和品牌推广，拥有丰富的市场营销经验

---
/**
 * @component TeamMember.CustomStyle
 *
 * @description
 * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member3',
});
---

<TeamMember
  name="王五"
  role="市场总监"
  avatar={avatar}
  bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
  class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
/>

Team Display

Combine multiple TeamMember components to display a complete team:

张三's avatar

张三

产品设计师

专注于用户体验设计，拥有5年产品设计经验

李四's avatar

李四

高级开发工程师

全栈开发专家，热爱开源项目，专注于前端框架和性能优化

王五's avatar

王五

市场总监

负责产品市场策略和品牌推广，拥有丰富的市场营销经验

---
/**
 * @component TeamMember.Group
 *
 * @description
 * 团队成员组展示组件示例，展示如何组合多个团队成员。
 */
import '../../style.ts';
import TeamMember from './TeamMember.astro';
import { getExampleImage } from '../../src/utils/image.ts';

const members = [
  {
    name: '张三',
    title: '产品设计师',
    avatar: getExampleImage({
      width: 200,
      height: 200,
      provider: 'robohash',
      randomSeed: 'member1',
    }),
    description: '专注于用户体验设计，拥有5年产品设计经验',
  },
  {
    name: '李四',
    title: '高级开发工程师',
    avatar: getExampleImage({
      width: 200,
      height: 200,
      provider: 'robohash',
      randomSeed: 'member2',
    }),
    description: '全栈开发专家，热爱开源项目，专注于前端框架和性能优化',
  },
  {
    name: '王五',
    title: '市场总监',
    avatar: getExampleImage({
      width: 200,
      height: 200,
      provider: 'robohash',
      randomSeed: 'member3',
    }),
    description: '负责产品市场策略和品牌推广，拥有丰富的市场营销经验',
  },
];
---

<div class="cosy:grid cosy:grid-cols-3 md:cosy:grid-cols-3 cosy:gap-8">
  {
    members.map((member) => (
      <TeamMember
        name={member.name}
        role={member.title}
        avatar={member.avatar}
        bio={member.description}
      />
    ))
  }
</div>