💡 Stretch sizing (fill the cross axis)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 58/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- c, typescript
- 领域
- frontend
调研方向
从 test/stretch-sizing.test.ts 和所引用的 diff 开始，然后跟踪 src/clayterm.c 中的 decode_axis，以及 ops.ts 中的 sizing helpers 和 packAxis case。跟踪应用 cross-axis sizing 的 layout pass；完成的标志是支持 stretch()，并且对于填满可用 cross axis 的 child，失败的 stretch-sizing 测试能够通过。
由索引模型根据 Issue 内容生成。
描述
Is your feature request related to a problem?
There's no sizing mode that fills the cross axis. grow() expands a child along the container's main axis, but on the cross axis a child only ever sizes to its content (fit) unless you hardcode a fixed(). In a top-to-bottom container 12 cells wide, a fit-content child holding X computes width: 1—there's no way to say "fill the container's width" so it spans all 12.
Describe the solution you'd like
A stretch() sizing axis, sibling to grow() / fit() / fixed(), that expands the element to fill the available cross-axis space:
open("child", {
layout: {
width: stretch(),
height: fixed(3),
},
});
The name is stretch (not grow, which is main-axis flex-grow, nor fill)—it's the cross-axis analog, matching the CSS width: stretch sizing keyword. Flexbox also expresses the same fill behavior as align-self: stretch, so this is the sizing-side counterpart to per-child align-self (#70). A stretch width in a ttb container makes the child span the full container width.
Describe alternatives you've considered
Setting width: fixed(containerWidth) works only when the container size is known and static—it hardcodes the dimension, breaks on resize, and can't follow a grow/fit parent. The renderer already knows the cross-axis extent at layout time; stretch just opts the child into it.
Additional context
Failing test case on nm/repro/stretch-sizing (test · diff).
decode_axis (src/clayterm.c:365) handles only FIT / GROW / PERCENT / FIXED; this needs a new stretch axis type there, a stretch() helper and packAxis case in ops.ts, and the cross-axis grow applied in the layout pass.
- 主要语言
- TypeScript
- 星标
- 42
- 派生
- 2
- 平均合并
- 21 小时 40 分钟
- 30 天内合并 PR
- 9
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
bombshell-dev/tty 的其他 Issue
-
enhancement
难度 2/5 1-3 小时 新手友好度 76/100
bombshell-dev/tty#61 · 1 个 reaction ·
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 25/100
bombshell-dev/tty#129 ·
维护者通常 1 天内回复
-
question
难度 5/5 一周以上 新手友好度 38/100
bombshell-dev/tty#112 ·
维护者通常 1 天内回复
-
enhancement high priority
难度 3/5 1-2 天 新手友好度 68/100
bombshell-dev/tty#83 · 2 条评论 ·
维护者通常 1 天内回复
-
enhancement
难度 4/5 3-5 天 新手友好度 48/100
bombshell-dev/tty#82 ·
维护者通常 1 天内回复
查看 bombshell-dev/tty 的全部 Issue
相似的 Issue
-
bug
难度 1/5 1 小时以内 新手友好度 88/100
StabilityNexus/Fate-EVM-Frontend#153 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
code-yeongyu/oh-my-openagent#9039 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 84/100
Tencent/teamai-cli#862 ·
维护者通常 1 天内回复
-
bug good first issue hacktoberfest redis
难度 2/5 1-3 小时 新手友好度 88/100
libredb/libredb-studio#1164 ·
维护者通常 1 天内回复
-
flake
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复