logo
简体中文

导航菜单

文档

TeamMember

简介

TeamMember 组件用于展示团队成员信息，支持头像、姓名、职位、简介与社交媒体链接。

Props

avatar

成员头像图片。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---



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

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

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

background

背景色类型，支持所有 Container 背景选项（如：base-100、primary、secondary、gradient-glow 等）。

张三's avatar

张三

前端工程师

专注于现代化 Web 开发

李四's avatar

李四

UI设计师

专注于用户体验和界面设计

王五's avatar

王五

后端工程师

专注于服务端开发和系统架构

赵六's avatar

赵六

产品经理

致力于打造优秀的产品体验

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="张三"
    role="前端工程师"
    avatar={getAvatarImage({ randomSeed: 'member-bg-1' })}
    bio="专注于现代化 Web 开发"
    background="base-100"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="李四"
    role="UI设计师"
    avatar={getAvatarImage({ randomSeed: 'member-bg-2' })}
    bio="专注于用户体验和界面设计"
    background="primary/10"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="王五"
    role="后端工程师"
    avatar={getAvatarImage({ randomSeed: 'member-bg-3' })}
    bio="专注于服务端开发和系统架构"
    background="success/10"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="赵六"
    role="产品经理"
    avatar={getAvatarImage({ randomSeed: 'member-bg-4' })}
    bio="致力于打造优秀的产品体验"
    background="accent/10"
/>

bio

成员简介文字。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---



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

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

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

class

自定义类名，覆盖默认样式。

王五's avatar

王五

后端开发工程师

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

---



/**
 * @component TeamMemberCustomStyle
 * @description TeamMember 组件自定义 class 用法示例。
 */
import { getExampleImage, TeamMember } 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"
/>

hoverShadow

悬停时卡片阴影强度。

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 { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowMdLg
 * @description TeamMember 组件 shadow=md, hoverShadow=lg 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowLgXl
 * @description TeamMember 组件 shadow=lg, hoverShadow=xl 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowXlSm
 * @description TeamMember 组件 shadow=xl, hoverShadow=sm 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

muted

是否使用柔和色样式（未激活状态）。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---



import { TeamMember } from "@coffic/cosy-ui";
---

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

---



import { TeamMember } from "@coffic/cosy-ui";
---

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

name

成员姓名。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---



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

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

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

role

成员职位。

张三's avatar

张三

前端开发工程师

拥有5年前端开发经验，专注于React和Vue生态系统。

---



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

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

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

rounded

圆角大小（可选值：none、sm、md、lg、xl、full）。

张三's avatar

张三

前端工程师

专注于现代化 Web 开发

李四's avatar

李四

UI设计师

专注于用户体验和界面设计

王五's avatar

王五

后端工程师

专注于服务端开发和系统架构

赵六's avatar

赵六

产品经理

致力于打造优秀的产品体验

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="张三"
    role="前端工程师"
    avatar={getAvatarImage({ randomSeed: 'member-rounded-1' })}
    bio="专注于现代化 Web 开发"
    rounded="none"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="李四"
    role="UI设计师"
    avatar={getAvatarImage({ randomSeed: 'member-rounded-2' })}
    bio="专注于用户体验和界面设计"
    rounded="sm"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="王五"
    role="后端工程师"
    avatar={getAvatarImage({ randomSeed: 'member-rounded-3' })}
    bio="专注于服务端开发和系统架构"
    rounded="lg"
/>

---



import { getAvatarImage, TeamMember } from '@coffic/cosy-ui';
---

<TeamMember
    name="赵六"
    role="产品经理"
    avatar={getAvatarImage({ randomSeed: 'member-rounded-4' })}
    bio="致力于打造优秀的产品体验"
    rounded="xl"
/>

shadow

卡片阴影强度。

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 { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowMdLg
 * @description TeamMember 组件 shadow=md, hoverShadow=lg 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowLgXl
 * @description TeamMember 组件 shadow=lg, hoverShadow=xl 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

---



/**
 * @component TeamMemberShadowXlSm
 * @description TeamMember 组件 shadow=xl, hoverShadow=sm 示例。
 */
import { getExampleImage, TeamMember } 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"
/>

社交媒体链接列表。

李四's avatar

李四

UI设计师

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

---



/**
 * @component TeamMemberWithSocial
 * @description TeamMember 组件带社交媒体链接用法示例。
 */
import { getExampleImage, TeamMember } 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}
/>

搜索