`。**所有样式通过单个 `style` 输入绑定**，接受一个包含样式属性的对象：\n\n```html\n
\n```\n\n支持的样式属性（对应 `Styles` 类型）：\n\n| 类别 | 属性 |\n| --------- | ------------------------------------------------------------------------------------------------------- |\n| 布局方向 | `flexDirection`: `'row' \\| 'column' \\| 'row-reverse' \\| 'column-reverse'` |\n| Flex 属性 | `flexGrow`, `flexShrink`, `flexBasis`, `flexWrap` |\n| 对齐 | `alignItems`, `alignSelf`, `alignContent`, `justifyContent` |\n| 尺寸 | `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`（数字或 `'100%'` 等字符串） |\n| 边距 | `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight`, `marginX`, `marginY` |\n| 内边距 | `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingX`, `paddingY` |\n| 定位 | `position`: `'static' \\| 'relative' \\| 'absolute'`，以及 `top`, `right`, `bottom`, `left` |\n| 溢出 | `overflow`: `'visible' \\| 'hidden'`，以及 `overflowX`, `overflowY` |\n| 文本换行 | `textWrap`: `'wrap' \\| 'hard' \\| 'truncate' \\| 'truncate-end' \\| 'truncate-middle' \\| 'truncate-start'` |\n| 间距 | `gap`, `rowGap`, `columnGap` |\n| 边框 | `borderStyle`, `borderTop`, `borderBottom`, `borderLeft`, `borderRight`, `borderColor` 等 |\n| ARIA | `aria-label`, `aria-hidden`, `aria-role`, `aria-state` |\n\n#### Text — 文本显示\n\n```typescript\nimport { Component } from '@angular/core';\nimport { BoxComponent, TextComponent } from '@cyia/ngx-ink';\n\n@Component({\n selector: 'my-app',\n standalone: true,\n imports: [BoxComponent, TextComponent],\n template: `\n
Styled text\n `,\n})\nexport class MyAppComponent {}\n```\n\n支持的颜色和样式属性（**所有属性均为 `input()` 类型，布尔值和字符串值需要使用 `[属性]=\"值\"` 绑定**）：\n\n| 属性 | 类型 | 说明 |\n| ----------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------- |\n| `color` | `string` | 前景色（使用 Chalk，支持所有 ANSI 颜色名称） |\n| `backgroundColor` | `string` | 背景色 |\n| `dimColor` | `boolean` | 降低亮度（需 `[dimColor]=\"true\"`） |\n| `bold` | `boolean` | 粗体 |\n| `italic` | `boolean` | 斜体 |\n| `underline` | `boolean` | 下划线 |\n| `strikethrough` | `boolean` | 删除线 |\n| `inverse` | `boolean` | 反转前景/背景色 |\n| `wrap` | `'wrap' \\| 'hard' \\| 'truncate-end' \\| 'truncate' \\| 'truncate-middle' \\| 'truncate-start'` | 文本换行或截断策略，默认 `'wrap'` |\n\n#### Newline — 换行\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NewlineComponent, TextComponent } from '@cyia/ngx-ink';\n\n@Component({\n selector: 'my-app',\n standalone: true,\n imports: [NewlineComponent, TextComponent],\n template: `
Line 1Line 2`,\n})\nexport class MyAppComponent {}\n```\n\n#### Spacer — 弹性空白\n\n```typescript\nimport { Component } from '@angular/core';\nimport { BoxComponent, SpacerComponent, TextComponent } from '@cyia/ngx-ink';\n\n@Component({\n selector: 'my-app',\n standalone: true,\n imports: [BoxComponent, SpacerComponent, TextComponent],\n template: `\n
\n Left\n \n Right\n \n `,\n})\nexport class MyAppComponent {}\n```\n\n#### Static — 静态内容\n\n```typescript\nimport { Component } from '@angular/core';\nimport { StaticComponent, TextComponent } from '@cyia/ngx-ink';\n\n@Component({\n selector: 'my-app',\n standalone: true,\n imports: [StaticComponent, TextComponent],\n template: `\n
\n
Live progress: {{ progress }}%\n\n
\n {{ log }}\n \n `,\n})\nexport class MyAppComponent {}\n```\n\n适用于不改变的输出，如日志、已完成的任务列表等。\n\n#### Transform — 文本变换\n\n```typescript\nimport { Component } from '@angular/core';\nimport { TextComponent, TransformComponent } from '@cyia/ngx-ink';\n\n@Component({\n selector: 'my-app',\n standalone: true,\n imports: [TextComponent, TransformComponent],\n template: `\n
\n Original\n \n `,\n})\nexport class MyAppComponent {\n transformFn = (children: string, index: number) => {\n return children.toUpperCase();\n };\n}\n```\n\n在输出到终端前转换子组件的字符串表示。\n\n### 使用 Hooks\n\n#### useInput — 键盘输入\n\n```typescript\nimport { Component } from '@angular/core';\nimport { useInput } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class InputComponent {\n constructor() {\n useInput((input, key) => {\n if (key.return) {\n // 回车键\n }\n if (key.upArrow) {\n // 上箭头\n }\n if (input === 'q') {\n // 按 Q 退出\n }\n });\n }\n}\n```\n\n返回的 `key` 对象包含：`upArrow`, `downArrow`, `leftArrow`, `rightArrow`, `pageDown`, `pageUp`, `home`, `end`, `return`, `escape`, `ctrl`, `shift`, `tab`, `backspace`, `delete`, `alt`, `f1`-`f19`, `space`, `enter`, `slash`, `dot`, `comma`，以及按键的原始字符。\n\n#### useWindowSize — 窗口大小\n\n```typescript\nimport { Component } from '@angular/core';\nimport { useWindowSize } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class WindowSizeComponent {\n size = useWindowSize();\n}\n```\n\n终端调整大小时自动更新。\n\n#### useAnimation — 动画\n\n```typescript\nimport { Component } from '@angular/core';\nimport { useAnimation } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class SpinnerComponent {\n animation = useAnimation({ interval: 80 });\n\n get spinnerChar() {\n const chars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];\n return chars[this.animation().frame % chars.length];\n }\n}\n```\n\n返回：\n\n- `frame`: 每 interval 递增的计数器\n- `time`: 自开始以来的总毫秒数\n- `delta`: 上一帧以来的毫秒数\n- `reset()`: 重置所有值\n\n#### useFocus — 焦点管理\n\n```typescript\nimport { Component } from '@angular/core';\nimport { useFocus } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class FocusItemComponent {\n focus = useFocus({\n autoFocus: false,\n id: 'item-1',\n });\n}\n```\n\n使用 Tab 键在组件间切换焦点。\n\n#### useCursor — 光标控制\n\n```typescript\nimport { Component } from '@angular/core';\nimport { useCursor } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class CursorComponent {\n constructor() {\n const { setCursorPosition } = useCursor();\n }\n}\n```\n\n#### useStdin / useStdout / useStderr — 流访问\n\n```typescript\nimport { useStdin, useStdout } from '@cyia/ngx-ink';\n\n@Component({\n /* ... */\n})\nexport class StreamComponent {\n stdin = useStdin();\n stdout = useStdout();\n stderr = useStderr();\n}\n```\n\n#### 其他 Hooks\n\n- `useApp` — 应用上下文\n- `useFocusManager` — 焦点管理器\n- `usePaste` — 粘贴事件监听\n- `useIsScreenReaderEnabled` — 检测屏幕阅读器\n- `useBoxMetrics` — 获取 Box 尺寸信息\n\n## Context Tokens\n\n可通过 Angular 的 `inject` 注入：\n\n- `APP_CONTEXT_TOKEN` — 应用上下文\n- `STDIN_CONTEXT_TOKEN` — stdin 上下文\n- `STDOUT_CONTEXT_TOKEN` — stdout 上下文\n- `STDERR_CONTEXT_TOKEN` — stderr 上下文\n- `FOCUS_CONTEXT_TOKEN` — 焦点上下文\n- `CURSOR_CONTEXT_TOKEN` — 光标上下文\n- `ANIMATION_CONTEXT_TOKEN` — 动画上下文\n- `ACCESSIBILITY_CONTEXT_TOKEN` — 无障碍上下文\n- `BACKGROUND_CONTEXT_TOKEN` — 背景色上下文\n\n## 导出列表\n\n### 核心\n\n| 导出 | 说明 |\n| ------------------------- | ----------------------------------- |\n| `render` | 渲染应用到终端，返回 `RenderResult` |\n| `TerminalRenderer` | 终端渲染器 |\n| `TerminalRendererFactory` | 渲染器工厂 |\n\n### 组件\n\n| 组件 | 说明 |\n| ------------------------ | ------------------ |\n| `BoxComponent` | 弹性盒子布局容器 |\n| `TextComponent` | 文本显示，支持样式 |\n| `NewlineComponent` | 换行符 |\n| `SpacerComponent` | 弹性空白 |\n| `StaticComponent` | 静态内容渲染 |\n| `TransformComponent` | 文本变换 |\n| `ErrorOverviewComponent` | 错误信息展示 |\n\n### Hooks\n\n| Hook | 返回类型 | 说明 |\n| -------------------------- | ---------------------------- | -------------- |\n| `useInput` | `void` | 监听键盘输入 |\n| `useWindowSize` | `Signal
` | 终端窗口尺寸 |\n| `useAnimation` | `Signal` | 动画驱动 |\n| `useFocus` | `Signal` | 焦点状态和控制 |\n| `useFocusManager` | `void` | 焦点管理器 |\n| `useCursor` | `{ setCursorPosition }` | 光标位置控制 |\n| `useStdin` | `Signal` | stdin 访问 |\n| `useStdinContext` | `Signal` | stdin 上下文 |\n| `useStdout` | `Signal` | stdout 访问 |\n| `useStderr` | `Signal` | stderr 访问 |\n| `useApp` | `Signal` | 应用上下文 |\n| `usePaste` | `void` | 粘贴事件 |\n| `useIsScreenReaderEnabled` | `boolean` | 屏幕阅读器检测 |\n| `useBoxMetrics` | `Signal` | Box 尺寸信息 |\n\n### 工具\n\n| 导出 | 说明 |\n| ------------------------------ | ------------------ |\n| `colorize` | ANSI 颜色处理 |\n| `sanitizeAnsi` | 清理 ANSI 转义序列 |\n| `kittyFlags`, `kittyModifiers` | Kitty 键盘协议支持 |\n\n## 与 Ink 的差异\n\nngx-ink 复用 Ink 的核心逻辑（ANSI 处理、Yoga 布局计算、渲染管道），但适配为 Angular：\n\n- 使用 Angular 组件（`@Component`）而非 React 函数组件\n- 使用 `input()` / `output()` 替代 props\n- 使用 Angular Signals 进行状态管理\n- 标准的 Angular 应用启动方式（`bootstrapApplication`）\n\n## 项目结构\n\n```\nprojects/ngx-ink-lib/\n├── src/\n│ ├── lib/ngx-ink/\n│ │ ├── components/ # Box, Text, Newline, Spacer, Static, Transform, ErrorOverview\n│ │ ├── contexts/ # Angular 上下文 Token 定义\n│ │ ├── hooks/ # useInput, useWindowSize, useAnimation 等\n│ │ ├── service/ # AppContextService 等服务\n│ │ ├── render.ts # 渲染入口\n│ │ ├── renderer2.ts # 渲染器实现\n│ │ ├── application.ts # Angular 应用启动\n│ │ ├── platform.ts # Platform 提供器\n│ │ └── ... # 核心工具函数\n│ └── public-api.ts # 公共 API 导出\n└── package.json\n```\n","readmeFilename":"README.zh-hans.md","keywords":["ink","angular","cli","stdout","components","command-line","print","render","colors","text"]}