storybookjs/storybook

Addon-docs: Resize iframe to fit content

开放

#8,112 创建于 2019年9月18日

在 GitHub 查看贡献者指南
 (32 条评论) (8 个反应) (2 位负责人)TypeScript (10,058 个派生)batch import
addon: docsblock: otherfeature requesthelp wantedtriage:reviewed

仓库指标

星标
 (89,909 个星标)
PR 合并指标
 (平均合并 7天 22小时) (30 天内合并 184 个 PR)

描述

Is your feature request related to a problem? Please describe. Sometimes the component being displayed in Docs is only a few px tall, yet the iframe defaults to 500px. When you have a lot of these stories stacked, there is a lot of empty space.

Describe the solution you'd like After iframe loads, have it resize to fit the content

Describe alternatives you've considered Can set styles to manually override the iframe height per-story, but this is difficult/tedious to maintain

贡献者指南

研究方向
首先，检查 Storybook 的 addon docs 包中的 iframe 组件，可能在 `addons/docs/src/blocks/` 目录下。了解 iframe 当前是如何设置尺寸的（固定 500px）。然后，实现一个 iframe `load` 事件的监听器，并使用 `postMessage` 来接收内容的高度。或者，使用 `ResizeObserver` 来检测尺寸变化。查看 issue 中的评论，了解任何先前的尝试或限制。确保解决方案能在不同浏览器中工作，并能处理动态内容调整大小。
技术栈
typescript
领域
frontend
议题类型
功能
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 小时
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
活跃
清晰度议题是否清楚说明期望改动、验收标准和下一步。
清晰
前置要求
GitTypeScript
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70