借助 Radix 原语,我们能够创建一个高质量的自定义 UI,其行为类似于原生元素——无需花费数周时间。相反,我们可以将时间花在核心产品上。
描述您在哪些项目中使用 Radix 原语?
Liveblocks 设计系统依赖于 Radix 原语、Tailwind CSS 和 React。它以一种结构化方式使我们能够在营销网站、文档网站和产品仪表盘上使用原语,例如颜色、字体和阴影,以及选定的组件集。
由于所有内容都在 Next.js 上运行,因此这使我们能够在不同平台上保持品牌一致性,同时仍然能够创建特定于平台的 UI 模式。最初是我设计和建立了这个系统,但现在由我们团队的设计工程师维护和改进。
Radix 原语在哪些方面帮助了您和您的公司?
在之前的一家公司,我设计并构建了一个自定义菜单组件。那时我了解到创建看起来和行为都像原生 macOS 菜单的组件是多么困难和耗时。菜单项可以无限嵌套,必须考虑屏幕空间,输入必须自动选择第一个匹配的项目,等等…
Radix 原语非常出色地处理了所有这些。借助 Radix 原语,我们能够创建一个高质量的自定义 UI,其行为类似于原生元素——无需花费数周时间。相反,我们可以将时间花在核心产品上。截至目前,我们使用 Radix 原语来实现我们的对话框、警告对话框、菜单、上下文菜单、滚动区域和工具提示。我们团队的 Marc Bouchenoire 最近也使用 NavigationMenu 将我们网站的主导航进行了转换,以提高可访问性。
您对 Radix 开发者体验有什么看法?
我喜欢我们只能将所需的组件安装到代码库中。这使我们能够一次将一个组件进行转换。但我真正喜欢的是组件完全没有样式,这使我们能够按照我们想要的方式组合它们,甚至使用 Tailwind CSS 为它们设置样式。
您对 Radix 文档有什么看法?
文档很棒。示例使我们能够很容易地理解事物的工作原理。我还查看了 Modulz 设计系统,以了解您在您这边如何使用 Radix,并且从中获得了许多灵感。