有远见
神通可以用于在用户菜单,表格等中显示循环用户配置.
这个组件纯粹是演示式的,为了交互,它可以和IconButton一起使用.
图片参考
阿凡达用法
默认
import { Avatar } from '@dt-dds/react';
export const App = () => {
return <Avatar title='User Name' size='medium' />;
};
带着相片
import { Avatar } from '@dt-dds/react';
export const App = () => {
return <Avatar type='photo' imageSrc='/profile.png' size='medium' />;
};
折叠
import { Avatar } from '@dt-dds/react';
export const App = () => {
return <Avatar type='collapsed' collapsedCount='+1' size='medium' />;
};
缩略图
import { Avatar } from '@dt-dds/react';
export const App = () => {
return <Avatar type='thumbnail' size='medium' />;
};
大小
import { Avatar } from '@dt-dds/react';
export const App = () => {
return (
<>
<Avatar title='User Name' size='small' />
<Avatar title='User Name' size='medium' />
<Avatar title='User Name' size='large' />
</>
);
};
大小不同的类型
import { Avatar } from '@dt-dds/react';
export const App = () => {
return (
<>
<Avatar type='letter' title='John Doe' size='large' />
<Avatar type='photo' imageSrc='/profile.png' size='small' />
<Avatar type='thumbnail' size='medium' />
<Avatar type='collapsed' collapsedCount='+4' size='medium' />
</>
);
};
API 密码
有远见
此组件可以通过在道具中传递字符串来包含最多两个简单的字符 title
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
title | string | - 说吧 | 在外观中显示的字母字符 |
type | AvatarType | 'letter' | 选择 Avatar 使用的视觉样式。 接受 : 二. 支助 'letter' - 显示首字母. 二. 支助 'collapsed' – 显示组外溢的"+N". 二. 支助 'thumbnail' - 通用占位符图标. 二. 支助 'photo' - 用途 imageSrc 自动倒计时键入缩略图. |
size | AvatarSize | 'medium' | 控制"神通"维度. 接受 : 二. 支助 'small' - 紧凑的UI. 二. 支助 'medium' - 默认. 二. 支助 'large' ——突出/突出用途. |
imageSrc | string | - 说吧 | 可选图像路径( 仅与“ 图片” 类型相通) |
dataTestId | string | 阿凡达 | 神通测试标识符 |
collapsedCount | string | “+1” | 显示在倒塌的外形内的数字( 最大 3 个字符) 。 默认为 '+1' 何时 type="collapsed"。 。 。 . |
customInitials | string | - 说吧 | 自定义要显示的首字母( 最大 2 个字符) 。 替换 title 如果现在. |
hasTooltip | Boolean | 虚假 | 在神通上徘徊时显示工具提示 |
图标按钮中的默认神通国
当"Avatar"由"IconButton"组成时,交互状态由"IconButton"的风格处理. 下表显示默认外观:
| 神通类型 | 被迫放弃的国家 | 残疾状态 |
|---|---|---|
| 信件 | primary.dark | primary.light |
| 缩略图 | primary.dark | primary.light |
| 折叠 | primary.light | content.contrast |
| 图片 | 无变动 | 38%不透明 |
自定义 : 使用 cssOverrides 覆盖默认徘徊状态或应用自定义主题颜色的道具 .
阿凡达数据属性
当在 IconButton 内部使用 Avatar 时, 瞄准以下带有 cs Overrides 的数据属性 :
| 属性 | 神通类型 |
|---|---|
[data-avatar-type='letter'] | 信件 |
[data-avatar-type='thumbnail'] | 缩略图 |
[data-avatar-type='collapsed'] | 崩溃 |
[data-avatar-type='photo'] | 图片 |
图标按钮提供了csOverrides道克,允许您对图标按钮及其子孙应用自定义 CSS 样式. 这使得与"神通"一起使用时能够完全有样式的灵活性.
示例: 有自定义样式的神通
目标 Avatar 类型使用 [data- avatar-type] 属性选择器定制其交互状态:
import { IconButton } from '@dt-dds/react-icon-button';
import { Avatar } from '@dt-dds/react-avatar';
import { css } from '@emotion/react';
export const CustomAvatarButton = () => {
const avatarHoverStyles = css`
&:hover:not(:disabled) {
[data-avatar-type='letter'] {
background-color: #a020f0;
}
}
`;
return (
<IconButton ariaLabel='User' cssOverrides={avatarHoverStyles}>
<Avatar title='John Doe' type='letter' customInitials='JD' />
</IconButton>
);
};
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
avatar
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证