★ FEATURED ARTICLE UI组件图表库前端【免费下载链接】tremorReact components to build charts and dashboards项目地址https://gitcode.com/gh_mirrors/tr/tremor点击查看免费下载导读本文以 Divider 组件的 changelog 为骨架系统讲解 Tremor Raw 中Divider分隔线组件的完整技术细节它的版本演进0.0.1 → 0.0.2、API 设计、样式体系、暗色模式支持、tremor-id约定以及 Playwright 测试与 Storybook 示例的实战用法。读完本文你将能独立使用并二次定制Divider也能理解 Tremor Raw 组件库统一的演进与质量保障方式。Tremor 是一套基于 Tailwind CSS 与 Radix UI 构建的 React 组件库用于快速搭建图表与数据看板见 README.md。Divider正是其中用于内容分区的轻量组件之一。一、changelog 全貌一次 Typo、一次架构修复、一次全局约定Divider的变更记录非常简短但信息密度不低# Tremor Divider Changelog ## 0.0.2 ### Changes - Chore: Add tremor-id - Fix: Supertype divider ## 0.0.1 ### Changes - Fix: Typo逐条拆解版本变更类型变更内容对应源码证据0.0.1Fix修复拼写错误早期版本遗留问题当前版本已无此问题0.0.2Chore为组件根节点添加tremor-idtremor-raw属性Divider.tsx0.0.2Fix修复 Supertype divider组件泛型/父类型相关修复Divider.tsx 采用React.ComponentPropsWithoutRefdiv类型这三条记录恰好勾勒出组件从能用到规范的演进路径先修正文案笔误再修复类型设计最后接入全库统一的tremor-id标记规范。其中tremor-id并非 Divider 独有——它是 Tremor Raw 所有组件的统一约定可在 Accordion、Badge、BarList、Card 等组件源码中看到完全相同的写法并在 CategoryBar 的测试 中通过toHaveAttribute(tremor-id, tremor-raw)被断言验证。这为自动化测试、主题注入与第三方样式定位提供了稳定的选择器锚点。二、源码解剖一个 59 行的 forwardRef 组件当前版本的Divider实现在 src/components/Divider/Divider.tsx共 59 行核心结构如下// Tremor Divider [v0.0.2] import React from react import { cx } from ../../utils/cx type DividerProps React.ComponentPropsWithoutRefdiv const Divider React.forwardRefHTMLDivElement, DividerProps( ({ className, children, ...props }, forwardedRef) ( div ref{forwardedRef} className{cx( // base mx-auto my-6 flex w-full items-center justify-between gap-3 text-sm, // text color text-gray-500 dark:text-gray-500, className, )} tremor-idtremor-raw {...props} {children ? ( div className{cx( // base h-[1px] w-full, // background color bg-gray-200 dark:bg-gray-800, )} / div classNamewhitespace-nowrap text-inherit{children}/div div className{cx( // base h-[1px] w-full, // background color bg-gray-200 dark:bg-gray-800, )} / / ) : ( div className{cx( // base h-[1px] w-full, // background color bg-gray-200 dark:bg-gray-800, )} / )} /div ), ) Divider.displayName Divider export { Divider }2.1 类型设计与 HTML 原生 div 完全对齐DividerProps React.ComponentPropsWithoutRefdiv意味着组件接受原生div元素的全部合法属性id、data-*、事件处理器等并通过{...props}透传到根节点。这正是 changelog 中 Supertype divider 修复的落点Divider不再使用自定义的属性白名单而是直接以div的 Props 作为超类型任何原生属性都能无缝传入配合forwardRef实现 ref 透传在表单、动画库等需要直接操作 DOM 节点的场景中毫无阻碍。2.2 双形态渲染有子元素与无子元素组件的渲染逻辑取决于是否传入children无子元素渲染一条h-[1px] w-full bg-gray-200 dark:bg-gray-800的水平细线铺满整行有子元素渲染左线 内容 右线三段结构内容区域通过whitespace-nowrap text-inherit保持单行不换行并继承父级文字颜色两边的线各占剩余宽度的一半从而让文本/图标/按钮居中显示。这种条件渲染配合gap-3保证内容与线段之间始终保持 0.75rem 的间距text-sm则为内容设置了基准字号。2.3 样式合并机制cx 的妙用所有类名都经过cx()处理其实现在 src/utils/cx.tsimport clsx, { type ClassValue } from clsx import { twMerge } from tailwind-merge export function cx(...args: ClassValue[]) { return twMerge(clsx(...args)) }cx先由clsx合并条件类名再由tailwind-merge去重冲突的 Tailwind 类如用户传入的text-lg会正确覆盖默认的text-sm因此通过className自定义样式时无需担心与内置类冲突且传入的className优先级最高排在cx参数最后。2.4 暗色模式与主题变量组件内置暗色适配文字色text-gray-500 dark:text-gray-500线条色bg-gray-200 dark:bg-gray-800。结合 tailwind.config.js 中配置的dark:变体只需在应用根节点切换dark类即可整体切换配色无需修改组件代码。这也是 Tremor Raw 全部组件遵循的设计一致性。三、实战用法四种 Story 场景Storybook 示例位于 src/components/Divider/divider.stories.tsx覆盖了组件的典型应用形态3.1 基础分隔线Divider /最简单的形态渲染一条通栏细线用于大段内容之间的视觉分隔默认上下外边距为my-6。3.2 图标与文本居中分隔div classNamew-96 Divider / Divider RiCalendar2Line classNameh-5 w-5 / /Divider DividerStandard/Divider Divider span classNamepx-4With little bit more space/span /Divider /div这是带内容的 Divider最典型的用法在统计数字、卡片区块之间插入带文字或图标的分隔线比纯线段更有信息表达力。3.3 仪表盘详情区块示例 p classNametext-sm text-gray-500 dark:text-gray-500Tickets Sold/p p classNametext-3xl font-semibold text-gray-900 dark:text-gray-50 1,587 /p DividerDetails/Divider p classNamemt-2 text-sm leading-7 text-gray-500 dark:text-gray-500 {/* 长文本说明内容 */} /p /展示了数据看板中标题 → 关键指标 → 分隔线 → 详情说明的经典段落结构分隔线在此处承担了小标题的作用。3.4 嵌入交互组件Divider Button variantsecondary classNamerounded-full Show more /Button /Dividerchildren可以是任意 React 节点甚至可以放入 Button 这类交互组件形成展开更多式的行动分隔条。四、质量保障Playwright 测试用例组件配套的端到端测试位于 src/components/Divider/divider.spec.ts通过 Playwright 驱动 Storybook 运行test.describe(Expect divider, () { test(to be rendered, async ({ page }) { await page.goto(http://localhost:6006/?path/story/ui-divider--default) await expect( page .frameLocator(iframe[titlestorybook-preview-iframe]) .locator(#storybook-root div) .nth(1), ).toBeVisible() }) })测试覆盖三条关键路径默认渲染DefaultStory 下组件可见图标子元素渲染WithChildrenStory 下通过getByRole(img)断言图标元素可见文本子元素渲染通过getByText(Standard)断言文本内容正确输出。测试的 Story 名称ui-divider--default、ui-divider--with-children与 divider.stories.tsx 中title: ui/Divider及 Story 导出名一一对应体现Storybook 即测试夹具的研发模式。运行方式见 package.jsonpnpm storybook启动 Storybook端口 6006pnpm test:all依次执行 Vitest 单元测试与 Playwright 端到端测试。五、如何在本仓库运行与查看 Divider安装依赖在仓库根目录执行pnpm install依赖清单见 package.json启动 Storybookpnpm storybook浏览器访问http://localhost:6006在左侧面板选择ui/Divider即可交互查看全部 Story运行测试先启动 Storybook再执行pnpm exec playwright test src/components/Divider/divider.spec.ts即可单独验证 Divider 的三个测试用例。结语从 src/components/Divider/changelog.md 的三条记录出发我们完整还原了 Tremor RawDivider组件的技术全貌它的版本足迹Typo 修复 → Supertype 修复 →tremor-id约定、59 行的精简实现、双形态渲染逻辑、基于cx的样式合并体系、暗色模式适配以及 Playwright Storybook 驱动的测试保障。理解这一个组件也就理解了 Tremor Raw 整个组件库的设计语言与工程规范——小而专注规范统一测试完备。赞分享UI组件图表库前端【免费下载链接】tremorReact components to build charts and dashboards项目地址https://gitcode.com/gh_mirrors/tr/tremor点击查看免费下载相关推荐Civitai 前端仓库 TypeScript 编码规范实战从 global.md 规则到源码实践Civitai 前端仓库 TypeScript 编码规范实战从 global.md 规则到源码实践 导读 本文围绕当前仓库根目录下的编码规范文件 .vscodUI组件图表库前端TanStack Form 的 BaseFormOptionsdefaultValues 与 onSubmitMeta 如何驱动表单初始化与提交元数据流TanStack Form 的 BaseFormOptionsdefaultValues 与 onSubmitMeta 如何驱动表单初始化与提交元数据流 本篇UI组件图表库前端Tremor ProgressCircle 环形进度组件深度解析从 changelog 看组件演进与 SVG 源码实现Tremor ProgressCircle 环形进度组件深度解析从 changelog 看组件演进与 SVG 源码实现 环形进度Progress CirclUI组件图表库前端上一篇testing-library/angular —— 优秀的Angular组件测试工具库下一篇MiniMax-M2.1-MXFP4架构详解62层MoE模型的量化奥秘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
