ui-translation
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSkill: UI Translation
技能：UI转换
Purpose
用途
Translate natural language UI descriptions into IDS (Iress Design System) component implementations using and .
@iress-oss/ids-components@iress-oss/ids-tokens将自然语言描述的UI转换为IDS（Iress设计系统）组件实现，使用和。
@iress-oss/ids-components@iress-oss/ids-tokensSetup
设置
tsx
import '@iress-oss/ids-components/dist/style.css'; // Required — component styles
import '@iress-oss/ids-tokens/build/css-vars.css'; // Required if using tokens directly
import {
IressProvider,
IressButton,
IressInput,
IressField,
IressStack,
IressInline,
IressText,
IressCard,
// ... import what you need
} from '@iress-oss/ids-components';
// Wrap your app in IressProvider (handles fonts + CSS variables)
function App() {
return <IressProvider>{/* your UI */}</IressProvider>;
}tsx
import '@iress-oss/ids-components/dist/style.css'; // Required — component styles
import '@iress-oss/ids-tokens/build/css-vars.css'; // Required if using tokens directly
import {
IressProvider,
IressButton,
IressInput,
IressField,
IressStack,
IressInline,
IressText,
IressCard,
// ... import what you need
} from '@iress-oss/ids-components';
// Wrap your app in IressProvider (handles fonts + CSS variables)
function App() {
return <IressProvider>{/* your UI */}</IressProvider>;
}Component Mapping
组件映射
Actions
操作组件
| Description | IDS Component | Example |
|---|---|---|
| Submit / primary action button | | |
| Cancel / secondary action button | | |
| Less prominent action | | |
| Icon-only action | | |
| Danger / delete action | | |
| Link in text | | |
| Dropdown/context menu trigger | | See patterns docs |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 提交/主要操作按钮 | | |
| 取消/次要操作按钮 | | |
| 次要操作按钮（低突出度） | | |
| 仅图标操作 | | |
| 危险/删除操作 | | |
| 文本内链接 | | |
| 下拉/上下文菜单触发器 | | 查看模式文档 |
Form Inputs
表单输入组件
| Description | IDS Component | Example |
|---|---|---|
| Labelled text input | | See Form example below |
| Select dropdown | | |
| Currency input | | |
| Checkbox | | |
| Checkbox group | | |
| Radio buttons | | |
| Toggle switch | | |
| Slider / range | | |
| Autocomplete / typeahead | | See component docs |
| Read-only display | | |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 带标签的文本输入 | | 参见下方表单示例 |
| 选择下拉框 | | |
| 货币输入 | | |
| 复选框 | | |
| 复选框组 | | |
| 单选按钮 | | |
| 切换开关 | | |
| 滑块/范围选择器 | | |
| 自动完成/输入提示 | | 查看组件文档 |
| 只读展示 | | |
Layout
布局组件
| Description | IDS Component | Example |
|---|---|---|
| Vertical stack (items stacked top-to-bottom) | | |
| Horizontal row (items side-by-side) | | |
| Grid columns | | |
| Container with max-width | | |
| Divider / separator | | |
| Responsive visibility | | |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 垂直堆叠（元素从上到下排列） | | |
| 水平行（元素并排排列） | | |
| 网格列 | | |
| 带最大宽度的容器 | | |
| 分隔线/分割符 | | |
| 响应式可见性 | | |
Content & Display
内容与展示组件
| Description | IDS Component | Example |
|---|---|---|
| Text / paragraph | | |
| Heading | | |
| Card / panel | | |
| Alert / notification | | |
| Loading spinner | | |
| Skeleton loader | | |
| Progress bar | | |
| Image | | |
| Icon | | |
| Tag / badge | | |
| Pill | | |
| Tooltip | | |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 文本/段落 | | |
| 标题 | | |
| 卡片/面板 | | |
| 提示/通知 | | |
| 加载旋转器 | | |
| 骨架加载器 | | |
| 进度条 | | |
| 图片 | | |
| 图标 | | |
| 标签/徽章 | | |
| 胶囊标签 | | |
| 工具提示 | | |
Overlays & Navigation
浮层与导航组件
| Description | IDS Component | Example |
|---|---|---|
| Modal / dialog | | See Modal docs |
| Slideout / drawer | | See Slideout docs |
| Popover | | See Popover docs |
| Menu | | See Menu docs |
| Tab navigation | | |
| Skip link (a11y) | | |
| Side navigation | | See SideNav pattern docs |
| Breadcrumbs | | See Breadcrumbs pattern docs |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 模态框/对话框 | | 查看Modal文档 |
| 侧边滑出/抽屉 | | 查看Slideout文档 |
| 弹出框 | | 查看Popover文档 |
| 菜单 | | 查看Menu文档 |
| 标签页导航 | | |
| 跳转链接（无障碍） | | |
| 侧边导航 | | 查看SideNav模式文档 |
| 面包屑导航 | | 查看Breadcrumbs模式文档 |
Tables
表格组件
| Description | IDS Component | Example |
|---|---|---|
| Data table | | |
| 描述 | IDS 组件 | 示例 |
|---|---|---|
| 数据表格 | | |
Styling Props (IressCSSProps)
样式属性（IressCSSProps）
Most IDS components accept styling props for layout adjustments:
| Prop | Purpose | Values |
|---|---|---|
| Override flex alignment | |
| Background colour | Colour tokens: |
| Border radius | Radius tokens: |
| Text colour | Colour tokens: |
| Flex grow | |
| Apply focus ring | |
| Hide from breakpoint up | |
| Hide below breakpoint | Breakpoints: |
| Max width | Size tokens: |
| Margin (all sides) | Spacing tokens: |
| Margin horizontal | Same as |
| Margin vertical | Same as |
| Margin top | Same as |
| Margin right | Same as |
| Margin bottom | Same as |
| Margin left | Same as |
| Remove last-child bottom margin | |
| Padding (all sides) | Spacing tokens: |
| Padding horizontal | Same as |
| Padding vertical | Same as |
| Padding top | Same as |
| Padding right | Same as |
| Padding bottom | Same as |
| Padding left | Same as |
| Enable overflow scrolling | |
| Screen-reader only | |
| Fill parent height | |
| Text alignment | |
| Typography style | |
| Element width | Size tokens: |
大多数IDS组件支持用于布局调整的样式属性：
| 属性 | 用途 | 取值 |
|---|---|---|
| 覆盖flex对齐方式 | |
| 背景颜色 | 颜色令牌： |
| 边框圆角 | 圆角令牌： |
| 文本颜色 | 颜色令牌： |
| Flex占比 | |
| 应用焦点环 | |
| 从指定断点及以上隐藏 | |
| 在指定断点以下隐藏 | 断点值： |
| 最大宽度 | 尺寸令牌： |
| 外边距（四边） | 间距令牌： |
| 水平外边距 | 与 |
| 垂直外边距 | 与 |
| 顶部外边距 | 与 |
| 右侧外边距 | 与 |
| 底部外边距 | 与 |
| 左侧外边距 | 与 |
| 移除最后一个子元素的底部外边距 | |
| 内边距（四边） | 间距令牌： |
| 水平内边距 | 与 |
| 垂直内边距 | 与 |
| 顶部内边距 | 与 |
| 右侧内边距 | 与 |
| 底部内边距 | 与 |
| 左侧内边距 | 与 |
| 启用滚动溢出 | |
| 仅屏幕阅读器可见 | |
| 填充父容器高度 | |
| 文本对齐方式 | |
| 排版样式 | |
| 元素宽度 | 尺寸令牌： |
Translation Examples
转换示例
"A login form with email and password fields and a submit button"
“包含邮箱、密码输入框和提交按钮的登录表单”
tsx
import {
IressButton,
IressField,
IressInput,
IressStack,
} from '@iress-oss/ids-components';
function LoginForm() {
return (
<IressStack gap="4">
<IressField label="Email" htmlFor="email" required>
<IressInput id="email" type="email" placeholder="Enter your email" />
</IressField>
<IressField label="Password" htmlFor="password" required>
<IressInput
id="password"
type="password"
placeholder="Enter your password"
/>
</IressField>
<IressButton mode="primary" type="submit">
Log in
</IressButton>
</IressStack>
);
}tsx
import {
IressButton,
IressField,
IressInput,
IressStack,
} from '@iress-oss/ids-components';
function LoginForm() {
return (
<IressStack gap="4">
<IressField label="Email" htmlFor="email" required>
<IressInput id="email" type="email" placeholder="Enter your email" />
</IressField>
<IressField label="Password" htmlFor="password" required>
<IressInput
id="password"
type="password"
placeholder="Enter your password"
/>
</IressField>
<IressButton mode="primary" type="submit">
Log in
</IressButton>
</IressStack>
);
}"A card with a title, description, and two action buttons"
“包含标题、描述和两个操作按钮的卡片”
tsx
import {
IressCard,
IressButton,
IressInline,
IressText,
} from '@iress-oss/ids-components';
function ActionCard() {
return (
<IressCard>
<IressCard.Header>
<IressText element="h3">Card Title</IressText>
</IressCard.Header>
<IressCard.Body>
<IressText>
This is the card description with supporting details.
</IressText>
</IressCard.Body>
<IressCard.Footer>
<IressInline gap="2">
<IressButton mode="primary">Confirm</IressButton>
<IressButton mode="secondary">Cancel</IressButton>
</IressInline>
</IressCard.Footer>
</IressCard>
);
}tsx
import {
IressCard,
IressButton,
IressInline,
IressText,
} from '@iress-oss/ids-components';
function ActionCard() {
return (
<IressCard>
<IressCard.Header>
<IressText element="h3">Card Title</IressText>
</IressCard.Header>
<IressCard.Body>
<IressText>
This is the card description with supporting details.
</IressText>
</IressCard.Body>
<IressCard.Footer>
<IressInline gap="2">
<IressButton mode="primary">Confirm</IressButton>
<IressButton mode="secondary">Cancel</IressButton>
</IressInline>
</IressCard.Footer>
</IressCard>
);
}"A settings page with a toggle, some checkboxes, and a save button"
“包含切换开关、多个复选框和保存按钮的设置页面”
tsx
import {
IressStack,
IressToggle,
IressCheckboxGroup,
IressCheckbox,
IressButton,
IressText,
IressDivider,
} from '@iress-oss/ids-components';
function SettingsPage() {
return (
<IressStack gap="6">
<IressText element="h2">Settings</IressText>
<IressToggle label="Enable notifications" />
<IressDivider />
<IressCheckboxGroup label="Notification types">
<IressCheckbox label="Email" value="email" />
<IressCheckbox label="SMS" value="sms" />
<IressCheckbox label="Push" value="push" />
</IressCheckboxGroup>
<IressDivider />
<IressButton mode="primary">Save settings</IressButton>
</IressStack>
);
}tsx
import {
IressStack,
IressToggle,
IressCheckboxGroup,
IressCheckbox,
IressButton,
IressText,
IressDivider,
} from '@iress-oss/ids-components';
function SettingsPage() {
return (
<IressStack gap="6">
<IressText element="h2">Settings</IressText>
<IressToggle label="Enable notifications" />
<IressDivider />
<IressCheckboxGroup label="Notification types">
<IressCheckbox label="Email" value="email" />
<IressCheckbox label="SMS" value="sms" />
<IressCheckbox label="Push" value="push" />
</IressCheckboxGroup>
<IressDivider />
<IressButton mode="primary">Save settings</IressButton>
</IressStack>
);
}Best Practices
最佳实践
- Always wrap in IressProvider — Required at the root of your app for fonts and CSS variables
- Use IressField for all form inputs — Provides consistent labels, hints, and validation display
- Use IressStack/IressInline for layout — Prefer these over custom CSS flex/grid
- Use spacing tokens for gap — Values 0–10 map to multiples of 4px
- Use semantic button modes — One per section,
primaryfor most actionssecondary - Always include labels — All form inputs need accessible labels via
IressField - Use status for feedback — for messages,
IressAlertprop on buttons for danger/successstatus - Prefer IDS components — Use instead of raw
IressText,<p>instead ofIressButton<button> - Check the component docs — Read the specific component doc for detailed props and patterns ()
node_modules/@iress-oss/ids-components/.ai/components/
- 始终用IressProvider包裹应用 — 必须在应用根节点使用，以加载字体和CSS变量
- 所有表单输入都使用IressField — 提供一致的标签、提示和验证展示
- 使用IressStack/IressInline进行布局 — 优先使用这些组件而非自定义CSS flex/grid
- 使用间距令牌设置gap — 0-10的值对应4px的倍数
- 使用语义化的按钮模式 — 每个区域仅保留一个按钮，大多数操作使用
primarysecondary - 始终包含标签 — 所有表单输入需通过添加可访问的标签
IressField - 使用状态进行反馈 — 用展示消息，按钮使用
IressAlert属性标记危险/成功状态status - 优先使用IDS组件 — 用替代原生
IressText，用<p>替代原生IressButton<button> - 查看组件文档 — 阅读具体组件的文档获取详细属性和模式（路径：）
node_modules/@iress-oss/ids-components/.ai/components/