图标按钮
此组件允许用户点击图标采取行动。 它是一个灵活的按钮组件,通过CSS的超接来制作一个图标并可以由任何子元素组成,用于高级的外观定制.
图片参考
Figma - 可点击图标 Figma - 功能图标状态 Figma - 对比状态
使用量
带有图标
import { IconButton } from '@dt-dds/react';
import { Icon } from '@dt-dds/react-icon';
export const App = () => {
const handleClick = () => console.log('Edit clicked');
return (
<IconButton onClick={handleClick} ariaLabel='Edit profile'>
<Icon code='edit' />
</IconButton>
);
};
跟阿凡达
import { IconButton } from '@dt-dds/react-icon-button';
import { Avatar } from '@dt-dds/react-avatar';
export const AvatarButton = () => {
return (
<IconButton
ariaLabel='User profile'
onClick={() => console.log('Avatar clicked')}
>
<Avatar title='John Doe' type='letter' size='medium' />
</IconButton>
);
};
CSS 覆盖
CssOverrides道克允许您对图标按钮及其子孙应用自定义 CSS 样式. 这使得在保持IconButton对其儿童成分的不可知性的同时,能够完全地保持灵活性.
示例:自定义图标按钮样式
import { IconButton } from '@dt-dds/react-icon-button';
import { Icon } from '@dt-dds/react-icon';
import { css } from '@emotion/react';
export const CustomButton = () => {
const customStyles = css`
&:hover:not(:disabled) {
background-color: #ff5733;
}
`;
return (
<IconButton cssOverrides={customStyles}>
<Icon code='star' />
</IconButton>
);
};
API 密码
图标按钮
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 要提供的图标组件 |
onClick | function | - 说吧 | 点击按钮时触发的函数 |
dataTestId | string | 按钮 | 自定义测试标识符 |
isDisabled | boolean | 虚假 | 确定按钮的已禁用状态 |
variant | IconButtonVariant | default | 确定图标的变体 |
size | ComponentSize | large | 确定图标的大小 |
cssOverrides | ReturnType<typeof css> | - 说吧 | 情感 CSS 对按钮及其子孙应用自定义样式 |
无障碍
- 当按钮不包含可读文本时, 总是提供 ariaLabel( 如只包含图标按钮)
- 焦点大纲随键盘导航自动可见
- 已禁用按钮被适当标记和键盘可访问
- 通过语义按钮元素支持屏幕阅读器
堆栈
- 类型脚本 用于静态类型检查
- 反应 — 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 文件夹包含编译输出.
iconButton
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证