Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@teamix/avatar

Package Overview
Dependencies
Maintainers
13
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@teamix/avatar

Avatar Component

  • 1.0.3
  • npm
  • Socket score

Version published
Weekly downloads
8
increased by14.29%
Maintainers
13
Weekly downloads
 
Created
Source

Teamix Avatar (迁移自旧版 AT Avatar 组件)

开发指南

样式前缀

如需给 Avatar 内部所用到的 @teamix/ui 组件指定 prefix,可添加 uiPrefix 参数(如 uiPrefix='aone-')

API

Avatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
img设置头像图片地址,必填String-
text设置头像旁文案,必填String-
closable是否显示关闭按钮Booleantrue
onClose点击关闭回调Function() => {}
onClick点击头像回调Function() => {}

Avatar.TextAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
text设置头像文案,必填String-
colorSets头像背景色集,会根据text的charCode选取其中一个作为背景色String数组['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492']

Avatar.ImageAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
img设置头像图片地址,必填String-

Avatar.ClusterAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
dataSource头像群数据源,数组成员见下方,必填Array-
colorSets头像背景色集,img不存在时会根据text的charCode选取其中一个作为背景色String数组['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492']
onSelect点击单个头像回调,入参为该头像相关参数Function(data) => {}
onClose关闭单个头像回调,入参为该头像相关参数Function(data) => {}
onAdd点击添加回调Function() => {}

Avatar.GroupAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
colorSets头像背景色集,img不存在时会根据text的charCode选取其中一个作为背景色String数组['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492']
dataSource头像群数据源,数组成员见下方,必填Array-
onClickMore点击更多回调Function() => {}

dataSource成员

参数说明类型默认值
img头像图片地址String-
text头像对应文案,必填String-
id头像对应id,必填String or Number-

Keywords

FAQs

Package last updated on 24 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc