React: IonTabButton cannot be wrapped for use with IonTabBar
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 1/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 45/100
- Issue 类型
- 文档
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react
调研方向
从 https://ionicframework.com/docs/api/tab-bar 的 IonTabBar 文档开始，查看其中如何描述 IonTabButton 的用法。使用报告中的 wrapper 示例，记录将 IonTabButton 包装在另一个组件中会导致 IonTabBar 无法识别它；当读者能够清楚理解这一限制时即完成。
由索引模型根据 Issue 内容生成。
描述
URL
https://ionicframework.com/docs/api/tab-bar
What is missing or inaccurate about the content on this page?
It seems that IonTabButton cannot be wrapped in another component; IonTabBar won't recognize it.
This should be noted in the documentation.
Background
My app puts the IonTabButton in a different order depending on whether the user is right-handed or left-handed.
Example of code that doesn't work (tabs are not displayed):
return (
<IonTabs>
{children}
<IonTabBar slot="bottom" className="app-tab-bar">
<TabButtonHome />
<TabButtonHelp />
</IonTabBar>
</IonTabs>
And here is a wrapper component:
const TabButtonHelp: React.VFC = () => (
<IonTabButton tab="tab-help" href={routeTabHelp}>
<IonIcon icon={helpOutline} />
<IonLabel>
<Trans id="tabbar_title.help">Help</Trans>
</IonLabel>
</IonTabButton>
);
This does work:
return (
<IonTabs>
{children}
<IonTabBar slot="bottom" className="app-tab-bar">
<IonTabButton tab="tab-help" href={routeTabHelp}>
<IonIcon icon={helpOutline} />
<IonLabel>
<Trans id="tabbar_title.help">Help</Trans>
</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
- 主要语言
- MDX
- 星标
- 620
- 派生
- 3.2k
- 平均合并
- 1 天 6 小时
- 30 天内合并 PR
- 65
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
ionic-team/ionic-docs 的其他 Issue
-
content: sheet modal docs should explain how to keep interactive content from dragging the sheet未关闭content
难度 2/5 1-3 小时 新手友好度 88/100
ionic-team/ionic-docs#4765 ·
维护者通常 1 天内回复
-
content
难度 2/5 1-3 小时 新手友好度 86/100
ionic-team/ionic-docs#4705 ·
维护者通常 1 天内回复
-
content package: angular
难度 2/5 半天 新手友好度 78/100
ionic-team/ionic-docs#4702 ·
维护者通常 1 天内回复
-
triage
难度 1/5 1 小时以内 新手友好度 80/100
ionic-team/ionic-docs#4546 ·
维护者通常 1 天内回复
-
content
难度 2/5 1-3 小时 新手友好度 68/100
ionic-team/ionic-docs#4381 · 2 条评论 ·
维护者通常 1 天内回复
查看 ionic-team/ionic-docs 的全部 Issue
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 92/100
philchalmers/SimDesign#106 ·
-
enhancement
难度 2/5 1-3 小时 新手友好度 88/100
Small-tailqwq/dsh-deep-whale#187 ·
维护者通常 1 天内回复
-
audit.md numbers Theming and Responsive Design differently in the headings and the score table可能已有人在做 @pbakaus 今天认领。 未关闭needs triage
难度 1/5 1 小时以内 新手友好度 90/100
pbakaus/impeccable#979 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
-
documentation
难度 1/5 1 小时以内 新手友好度 90/100
fastrevmd-lab/rustmistmcp#161 ·