Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

feat: modernize Badge according to MD3

未关闭
#4,974 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 7 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
58/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
冷清
技术栈
react-native, typescript
领域
mobile

调研方向

从现有的 Badge 组件开始,将其当前的尺寸、内边距、排版和溢出行为与链接的 Material Design 3 badge 规范进行比较。完成标准是:无子元素的 badge 渲染为 6dp 的圆点,带标签的 badge 渲染为 16dp 的胶囊,间距和文本大小使用指定值,并且长标签遵守 16x34dp 的限制。

由索引模型根据 Issue 内容生成。

描述

v6

The goal is to modernize the Badge component to the latest Material Design specs by reusing theme tokens (shape, typography, colors etc).

Current state

Badge

MD3 spec: Badges
Specs link: https://m3.material.io/components/badges/specs

Color tokens
  • Background error ✅
  • Label text onError ✅
Spacing / sizing
  • Default size is 20dp. MD3 defines small badge at 6dp (no label) and large badge at 16dp (with label)
  • No small/large distinction. Size should be determined automatically: 6dp when no children, 16dp when children are present
  • paddingHorizontal: 3. Spec requires 4dp between badge edge and text
  • fontSize = size * 0.5 yields 8sp at 16dp. Spec requires 11sp for large badge label text
  • Large badge max character count size (16x34dp) not handled; text currently overflows unconstrained
Behavior
  • No automatic small vs large variant. Component should render as a 6dp dot when childless and as a 16dp pill when a label is provided
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
6 天 12 小时
30 天内合并 PR
5

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

callstack/react-native-paper 的其他 Issue

查看 callstack/react-native-paper 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。