SuperAPI AI 工具集

ink-layout-styling

编程与开发

查看项目

更新于 10-16 01:57

技能介绍

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 取值一致。
  • 颜色应节制使用,用于强调。
  • 需在不同终端尺寸与模拟器上测试。

关于版本要求、安装命令、依赖包信息,资料暂未提供。