logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • 👀 视觉回归测试
  • 为什么禁用日期这么难?
  • 封装 Form.Item 实现数组转对象
  • 行省略计算
  • 📢 v4 维护周期截止
  • antd 里常用的 TypeScript 工具方法
  • 一个构建的幽灵
  • 当 Ant Design 遇上 CSS 变量
  • API 的历史债务
  • 灵动的 Notification
  • 色彩模型与颜色选择器
  • 主题拓展
  • 虚拟表格来了!
  • 快乐工作主题(一)
  • 动态样式去哪儿了?
  • Suspense 引发的样式丢失问题
  • 打包体积优化
  • 你好,GitHub Actions
  • 所见即所得
  • 静态方法之痛
  • SSR 静态样式导出
  • 依赖排查
  • 贡献者开发维护指南
  • 转载-如何提交无法解答的问题
  • 新的 Tooltip 对齐方式
  • 非必要的渲染
  • 如何成长为 Collaborator
  • Modal hook 的有趣 BUG
  • antd 测试库迁移的那些事儿
  • Tree 的勾选传导
  • getContainer 的一些变化
  • 组件级别的 CSS-in-JS

快乐工作主题(一)

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

在 v5 发布会上,我们的设计师团队提过将会提供快乐工作的主题。这部分工作仍然在循序渐进的进行中,但是我们已经有了一些进展,想在这里和大家分享。

太长不看

你可以直接使用 @ant-design/happy-work-theme 来切换主题特效(或者继续阅读看看我们做了什么):

tsx
import { HappyProvider } from '@ant-design/happy-work-theme';
export default () => (
<HappyProvider>
<Button />
</HappyProvider>
);

Happy Work Theme

定制水波纹

Ant Design 中,一个比较有特色的设计交互就是在一些组件上的点击波纹效果。你可以在各个地方看到它们:

  • Button
  • Checkbox
  • Radio
  • Switch

在过去数个大版本中,这个水波纹特效都无法修改。如果要关闭它,开发者甚至需要做一些“黑魔法”才能实现。所以当设计师提出一个快乐的主题能力时,作为开发者我们觉得这是个好时机来做一些改造了。

Wave 组件

水波纹实际上是一个 Wave 组件,它会监听子组件的点击事件。然后添加一个 box-shadow 动效产生水波纹:

tsx
// Sample code.
const Button = (
<Wave>
<button />
</Wave>
);

在最初的设计中(#40111),我们希望水波纹定制能力属于 Design Token 的一部分。但是这样的话,Design Token 就会变得有些过于复杂,从原本的纯 string | number 类型变成了 string | number | Function<T>。从 API 设计角度看,Function<T> 也有坏味道,未来如果有新的定制需求,Function 的类型会变得愈发发散。所以 #40111 永远停留在 Draft 版本。

ConfigProvider

接着,我们选择将其放在 ConfigProvider 中。ConfigProvider 是一个全局的配置组件,它可以影响到所有的子组件。其 API 也已经囊括了大量组件的配置能力,所以我们只需要添加一个 wave 属性即可:

tsx
<ConfigProvider wave={{ showEffect }}>
<Button />
</ConfigProvider>

Customize Wave Effect

点击 查看 ConfigProvider 示例。

showEffect 方法会告知当前需要产生特效的 DOM 节点,这个节点已经经过封装总会对应到正确的元素上(例如 Button 是其本身,而 Radio 会从 label 中找到 Radio 圆框的节点)。并且告知你它是哪个组件以及当前节点所属的 Design Token:

tsx
type ShowEffect = (target: HTMLElement, info: { component: string; token: GlobalToken }) => void;

通过 Design Token,你可以实现符合当前主题的特效。例如在文章开头的 GIF 中,当主题色变换时我们可以获取当前的主题色并添加对应的特效。

最后

快乐工作主题的工作仍然在进行中,我们会在后续的版本中逐步添加更多的能力。当前 @ant-design/happy-work-theme 提供的 HappyProvider 通过 ConfigProvider 实现了水波纹特效的替换,我们计划开发者未来无需做额外的改造,就能通过 HappyProvider 随着版本迭代而逐步添加更多的“快乐”。敬请期待。