logo
English

导航菜单

Documents

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
  • Card shadow (shadow/hoverShadow) intensity can be customized (e.g. cosy:shadow-md, cosy:shadow-lg, etc.)
  • 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年前端开发经验，专注于React和Vue生态系统。

---
/**
 * @component TeamMemberBasic
 * @description TeamMember 组件基础用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

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

<TeamMember
  name="张三"
  role="前端开发工程师"
  avatar={avatar}
  bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
/>

Add social media links through the socialLinks property:

李四's avatar

李四

UI设计师

专注于用户体验和界面设计，热爱创造直观易用的产品。

---
/**
 * @component TeamMemberWithSocial
 * @description TeamMember 组件带社交媒体链接用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

// 显式声明类型，避免类型不匹配
interface SocialLink {
  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
  url: string;
}

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member2',
});
const socialLinks: SocialLink[] = [
  { platform: 'github', url: 'https://github.com/lisi' },
  { platform: 'twitter', url: 'https://twitter.com/lisi' },
  { platform: 'linkedin', url: 'https://linkedin.com/in/lisi' },
];
---

<TeamMember
  name="李四"
  role="UI设计师"
  avatar={avatar}
  bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
  socialLinks={socialLinks}
/>

Shadow Intensity

Customize the shadow intensity through the shadow and hoverShadow properties:

shadow=sm, hover=md's avatar

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg's avatar

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl's avatar

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm's avatar

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowSmMd
 * @description TeamMember 组件 shadow=sm, hoverShadow=md 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-sm-md',
});
---

<TeamMember
  name="shadow=sm, hover=md"
  role="后端开发"
  avatar={avatar}
  bio="shadow=sm, hoverShadow=md"
  shadow="sm"
  hoverShadow="md"
/>
shadow=sm, hover=md's avatar

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg's avatar

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl's avatar

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm's avatar

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowMdLg
 * @description TeamMember 组件 shadow=md, hoverShadow=lg 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-md-lg',
});
---

<TeamMember
  name="shadow=md, hover=lg"
  role="后端开发"
  avatar={avatar}
  bio="shadow=md, hoverShadow=lg"
  shadow="md"
  hoverShadow="lg"
/>
shadow=sm, hover=md's avatar

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg's avatar

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl's avatar

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm's avatar

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowLgXl
 * @description TeamMember 组件 shadow=lg, hoverShadow=xl 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-lg-xl',
});
---

<TeamMember
  name="shadow=lg, hover=xl"
  role="后端开发"
  avatar={avatar}
  bio="shadow=lg, hoverShadow=xl"
  shadow="lg"
  hoverShadow="xl"
/>
shadow=sm, hover=md's avatar

shadow=sm, hover=md

后端开发

shadow=sm, hoverShadow=md

shadow=md, hover=lg's avatar

shadow=md, hover=lg

后端开发

shadow=md, hoverShadow=lg

shadow=lg, hover=xl's avatar

shadow=lg, hover=xl

后端开发

shadow=lg, hoverShadow=xl

shadow=xl, hover=sm's avatar

shadow=xl, hover=sm

后端开发

shadow=xl, hoverShadow=sm

---
/**
 * @component TeamMemberShadowXlSm
 * @description TeamMember 组件 shadow=xl, hoverShadow=sm 示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const avatar = getExampleImage({
  width: 200,
  height: 200,
  provider: 'robohash',
  randomSeed: 'member-shadow-xl-sm',
});
---

<TeamMember
  name="shadow=xl, hover=sm"
  role="后端开发"
  avatar={avatar}
  bio="shadow=xl, hoverShadow=sm"
  shadow="xl"
  hoverShadow="sm"
/>

Custom Styling

Use the class property to customize the member card style.

王五's avatar

王五

后端开发工程师

专注于Node.js和云原生架构，热爱开源。

---
/**
 * @component TeamMemberCustomStyle
 * @description TeamMember 组件自定义 class 用法示例。
 */
import { TeamMember } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

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

<TeamMember
  name="王五"
  role="后端开发工程师"
  avatar={avatar}
  bio="专注于Node.js和云原生架构，热爱开源。"
  class="cosy:border-2 cosy:border-primary cosy:shadow-xl"
/>

搜索