Ink 布局与样式技能用于在终端 CLI 应用中,通过 Ink 与基于 Flexbox 的定位和样式创建终端界面布局。
【用途】 该技能面向使用 Ink 构建终端界面的场景,帮助开发者以 Flexbox 思路组织终端布局并对文本进行样式化处理。
【主要能力】 Box 组件是核心布局原语,使用 Flexbox 属性:
- flexDirection:column(默认垂直堆叠)、row(水平排列)、reverse(反向排列)。
- 间距:margin 及 marginTop/marginLeft/marginRight/marginBottom 方向性外边距;padding 及 paddingX/paddingY 内边距。
- 对齐:alignItems(center、flex-start、flex-end)控制交叉轴;justifyContent(center、space-between、space-around)控制主轴。
- 尺寸:width/height 支持固定数值与百分比;支持 minWidth、maxWidth 等最小/最大约束。
- 边框:borderStyle 支持 single、double、round、bold、singleDouble、doubleSingle、classic,并可设置 borderColor。
Text 组件用于文本样式:
- 颜色:color 支持 red、green、yellow、blue、cyan、magenta 等前景色及十六进制颜色;backgroundColor 设置背景色。
- 格式:bold、italic、underline、strikethrough、dimColor、inverse,可组合使用。
- 换行与截断:wrap="wrap" 自动换行,wrap="truncate" 截断,wrap="truncate-end" 带自定义省略号截断。
【使用方式】 提供了多种可复用布局模式示例:
- 卡片布局:使用 round 边框、颜色与 padding 的 Card 组件。
- 分栏布局:两个 50% 宽度的 Box 并排的 SplitLayout。
- 页眉/内容/页脚布局:使用 flexDirection="column"、height="100%" 与 flexGrow。
- 网格布局:按列数切片并按百分比宽度排列的 Grid 组件。
- 响应式布局:通过 useStdout 读取 stdout.columns,判断终端宽度是否小于 80 列并切换方向。
- 工具组件:Spacer 用于将元素推开,Newline 用于插入空行。
【适用场景】 适用于需要在终端中呈现结构化界面(如卡片、分栏、页眉页脚、网格、模态框、侧边栏、全宽页眉)的 CLI 应用开发。
【限制与最佳实践】
- 布局应使用 Box,不要用 Text 做布局。
- 以 Flexbox 属性思路设计布局。
- 保持 margin/padding 取值一致。
- 颜色应节制使用,用于强调。
- 需在不同终端尺寸与模拟器上测试。
关于版本要求、安装命令、依赖包信息,资料暂未提供。