图示
DiagramInspector 检查面板
读者刚刚选中的东西，写在图旁边。
来自@misoto22/design/diagrams
什么时候用它
一个节点大概能装八个词，再多它就不是节点了。超出这八个的——端口、归属团队、它参与的六条关系——都归这里。
示例
default
Service
API
FastAPI, behind the load balancer. Owns every read the cache misses.
- 8000
- ap-southeast-2
- api
Relationships
- fromCloudFront
- toRedis
- toPostgres
说明
读者刚刚选中的东西，写出来。
一张图里每个节点大概能装八个词，再多它就不是图、而是一份画了线的文档。超出这八个的一切——端口、归属团队、它是从哪个文件读出来的、它参与的那六条关系——都属于图旁边而不是图里面，而这里就是那个地方。
不是对话框，而且这是刻意的。检查面板是一个随选择变化的区域，不是一个模态。给它 role="dialog" 会为一个读者从未打开过的东西劫持焦点、索要关闭——他们点的是一个节点，面板是跟过来的。所以它是一个带 aria-live="polite" 的具名区域，这正是让读屏软件播报新选择、同时不把光标从读者手上的事情里抢走的做法。
关系带了 onSelect 时是真按钮，这就是这张图变得可用键盘导航的方式：读者可以一个邻居一个邻居地走完整张图，全程不碰那张画。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | string | — | |
| actions | ReactNode | 事实列表下方的按钮——复制链接、打开源码。 | |
| className | string | — | |
| description | ReactNode | — | |
| eyebrow | string | 标题上方的引题——这个面板正在展示的是**哪一类**东西。 | |
| facts | InspectorFact[] | [] | — |
| floating | boolean | 渲染成浮在界面之上的面板，而不是排在文档流里。 | |
| links | InspectorLink[] | [] | — |
| onClose | () => void | — |
无障碍
- 是一个带 aria-live="polite" 的具名区域，不是对话框：读者点的是节点，他们没有“打开”任何东西，所以焦点从不被劫持或索要。
- 关系带了 onSelect 时是真按钮，这样这张图就能用键盘一个邻居一个邻居地走下去。