443 lines
16 KiB
TypeScript
443 lines
16 KiB
TypeScript
|
export const demoZh = {
|
||
|
|
demoIcon: {
|
||
|
|
description:
|
||
|
|
"用于渲染已注册图标的组件。如果提供了 `onPress`，则包装在 <TouchableOpacity /> 中，否则是 <View />。",
|
||
|
|
useCase: {
|
||
|
|
icons: {
|
||
|
|
name: "图标",
|
||
|
|
description: "组件内注册的图标列表。",
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
name: "尺寸",
|
||
|
|
description: "有一个 size 属性。",
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
name: "颜色",
|
||
|
|
description: "有一个 color 属性。",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoTextField: {
|
||
|
|
description: "TextField 组件允许输入和编辑文本。",
|
||
|
|
useCase: {
|
||
|
|
statuses: {
|
||
|
|
name: "状态",
|
||
|
|
description: "有一个 status 属性 - 与其他组件中的 `preset` 类似，但也会影响组件功能。",
|
||
|
|
noStatus: {
|
||
|
|
label: "无状态",
|
||
|
|
helper: "这是默认状态",
|
||
|
|
placeholder: "在此输入文字",
|
||
|
|
},
|
||
|
|
error: {
|
||
|
|
label: "错误状态",
|
||
|
|
helper: "出现错误时使用的状态",
|
||
|
|
placeholder: "在此输入文字",
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
label: "禁用状态",
|
||
|
|
helper: "禁用编辑并使文字变淡",
|
||
|
|
placeholder: "在此输入文字",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
viaLabel: {
|
||
|
|
labelTx: "通过 `label` 属性",
|
||
|
|
helper: "通过 `helper` 属性",
|
||
|
|
placeholder: "通过 `placeholder` 属性",
|
||
|
|
},
|
||
|
|
rightAccessory: {
|
||
|
|
label: "右侧附件",
|
||
|
|
helper: "此属性接收一个返回 React 元素的函数。",
|
||
|
|
},
|
||
|
|
leftAccessory: {
|
||
|
|
label: "左侧附件",
|
||
|
|
helper: "此属性接收一个返回 React 元素的函数。",
|
||
|
|
},
|
||
|
|
supportsMultiline: {
|
||
|
|
label: "支持多行",
|
||
|
|
helper: "为多行文本启用更高的输入框。",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
styleInput: {
|
||
|
|
label: "输入框样式",
|
||
|
|
helper: "通过 `style` 属性",
|
||
|
|
},
|
||
|
|
styleInputWrapper: {
|
||
|
|
label: "输入框包装样式",
|
||
|
|
helper: "通过 `inputWrapperStyle` 属性",
|
||
|
|
},
|
||
|
|
styleContainer: {
|
||
|
|
label: "容器样式",
|
||
|
|
helper: "通过 `containerStyle` 属性",
|
||
|
|
},
|
||
|
|
styleLabel: {
|
||
|
|
label: "标签和帮助文字样式",
|
||
|
|
helper: "通过 `LabelTextProps` 和 `HelperTextProps` style 属性",
|
||
|
|
},
|
||
|
|
styleAccessories: {
|
||
|
|
label: "附件样式",
|
||
|
|
helper: "通过 `RightAccessory` 和 `LeftAccessory` style 属性",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoToggle: {
|
||
|
|
description:
|
||
|
|
"渲染一个布尔输入。这是一个受控组件，需要一个 onValueChange 回调来更新 value 属性，以便组件反映用户操作。",
|
||
|
|
useCase: {
|
||
|
|
variants: {
|
||
|
|
name: "变体",
|
||
|
|
description: "组件支持几种变体。",
|
||
|
|
checkbox: {
|
||
|
|
label: "复选框 - 用于多选的方形输入。",
|
||
|
|
helper: "这个可以打开/关闭。",
|
||
|
|
},
|
||
|
|
radio: {
|
||
|
|
label: "单选框 - 用于单选的圆形输入。",
|
||
|
|
helper: "这个也可以打开/关闭。",
|
||
|
|
},
|
||
|
|
switch: {
|
||
|
|
label: "开关 - 滑动切换输入。",
|
||
|
|
helper: "这个同样可以打开/关闭。",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
statuses: {
|
||
|
|
name: "状态",
|
||
|
|
description: "有一个 status 属性。",
|
||
|
|
noStatus: "无状态 - 这是默认状态",
|
||
|
|
errorStatus: "错误状态 - 用于显示错误",
|
||
|
|
disabledStatus: "禁用状态 - 切换按钮禁用时",
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
useCase: {
|
||
|
|
checkBox: {
|
||
|
|
label: "通过 `labelTx` 属性",
|
||
|
|
helper: "通过 `helperTx` 属性。",
|
||
|
|
},
|
||
|
|
checkBoxMultiLine: {
|
||
|
|
helper: "支持多行帮助文字。",
|
||
|
|
},
|
||
|
|
radioChangeSides: {
|
||
|
|
helper: "你可以更改位置。",
|
||
|
|
},
|
||
|
|
customCheckBox: {
|
||
|
|
label: "如果需要，将图标传递给 checkbox 属性。",
|
||
|
|
},
|
||
|
|
switch: {
|
||
|
|
label: "开关也可以读取各种 TX 属性",
|
||
|
|
helper: "通过 `helperTx` 属性",
|
||
|
|
},
|
||
|
|
switchAid: {
|
||
|
|
label: "或者自定义组件",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
outerWrapper: "1 - inputOuterWrapper",
|
||
|
|
innerWrapper: "2 - inputInnerWrapper",
|
||
|
|
inputDetail: "3 - inputDetail",
|
||
|
|
labelTx: "您也可以设置 labelTx 的样式",
|
||
|
|
styleContainer: "或者，设置整个容器的样式",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoButton: {
|
||
|
|
description: "允许用户执行操作并做出选择的组件。包装了内置的 Pressable 组件。",
|
||
|
|
useCase: {
|
||
|
|
presets: {
|
||
|
|
name: "预设",
|
||
|
|
description: "有几种预设样式。",
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
viaTextProps: "通过 `text` 属性 - 纯文本",
|
||
|
|
children: "子元素 - 嵌套组件",
|
||
|
|
rightAccessory: "右侧附件",
|
||
|
|
leftAccessory: "左侧附件",
|
||
|
|
nestedChildren: "嵌套子元素",
|
||
|
|
nestedChildren2: "使用嵌套子元素时应使用 `preset='default'`",
|
||
|
|
nestedChildren3: "支持多层嵌套子元素",
|
||
|
|
multiLine: "多行文本 - 支持长文本内容自动换行显示",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
styleContainer: "样式容器 - ViewStyle",
|
||
|
|
styleText: "样式文字 - TextStyle",
|
||
|
|
styleAccessories: "样式附件 - ViewStyle",
|
||
|
|
pressedState: "按下状态的样式！",
|
||
|
|
disabledState: "禁用状态的样式！",
|
||
|
|
},
|
||
|
|
disabling: {
|
||
|
|
name: "禁用",
|
||
|
|
description: "可以使用 `disabled` 属性禁用组件。",
|
||
|
|
standard: "禁用 - 标准",
|
||
|
|
filled: "禁用 - 填充",
|
||
|
|
reversed: "禁用 - 反转",
|
||
|
|
accessory: "禁用的附件样式",
|
||
|
|
textStyle: "禁用的文字样式",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoListItem: {
|
||
|
|
description: "用于数据列表或菜单选择的样式化行组件。",
|
||
|
|
useCase: {
|
||
|
|
height: {
|
||
|
|
name: "高度",
|
||
|
|
description: "行可以有不同的高度。",
|
||
|
|
defaultHeight: "默认高度 (56px)",
|
||
|
|
customHeight: "自定义高度通过 `height` 属性",
|
||
|
|
textHeight: "文字超过一行时也会改变高度 - 看我现在多高！",
|
||
|
|
longText:
|
||
|
|
"通过 `topSeparator` 属性，可以添加分隔线。这对于需要顶部分隔线的首个 ListItem 很有用。",
|
||
|
|
},
|
||
|
|
separators: {
|
||
|
|
name: "分隔线",
|
||
|
|
description: "可以在顶部或底部添加分隔线。",
|
||
|
|
topSeparator: "只有顶部分隔线",
|
||
|
|
topAndBottomSeparator: "顶部和底部分隔线",
|
||
|
|
bottomSeparator: "只有底部分隔线",
|
||
|
|
},
|
||
|
|
icons: {
|
||
|
|
name: "图标",
|
||
|
|
description: "可以显示左侧或右侧的图标。",
|
||
|
|
leftIcon: "左侧图标",
|
||
|
|
rightIcon: "右侧图标",
|
||
|
|
leftRightIcons: "左右图标",
|
||
|
|
},
|
||
|
|
customLeftRight: {
|
||
|
|
name: "自定义左/右组件",
|
||
|
|
description: "如果图标不够用，可以传递自定义组件。",
|
||
|
|
customLeft: "自定义左侧组件",
|
||
|
|
customRight: "自定义右侧组件",
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
text: "通过 `text` 属性 - 纯文本",
|
||
|
|
children: "子元素 - 嵌套的 Text 组件",
|
||
|
|
nestedChildren1: "第一行",
|
||
|
|
nestedChildren2: "第二行",
|
||
|
|
},
|
||
|
|
listIntegration: {
|
||
|
|
name: "与 FlatList 集成",
|
||
|
|
description: "组件可以轻松与您喜欢的列表界面集成。",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
styledText: "样式化的文字",
|
||
|
|
styledContainer: "样式化的容器（红色边框）",
|
||
|
|
tintedIcons: "着色的图标",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoCard: {
|
||
|
|
description: "卡片在表面上以相关的、可操作的信息分组来显示内容。",
|
||
|
|
useCase: {
|
||
|
|
presets: {
|
||
|
|
name: "预设",
|
||
|
|
description: "有几种预设卡片配置。",
|
||
|
|
default: {
|
||
|
|
heading: "默认预设",
|
||
|
|
content: "这是默认预设的内容",
|
||
|
|
footer: "这是页脚",
|
||
|
|
},
|
||
|
|
reversed: {
|
||
|
|
heading: "反转预设",
|
||
|
|
content: "这是反转预设的内容",
|
||
|
|
footer: "这是页脚",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
verticalAlignment: {
|
||
|
|
name: "垂直对齐",
|
||
|
|
description: "卡片可以配置为不同的对齐方式。",
|
||
|
|
top: {
|
||
|
|
heading: "顶部（默认）",
|
||
|
|
content: "所有卡片内容垂直对齐到顶部。",
|
||
|
|
footer: "包括页脚",
|
||
|
|
},
|
||
|
|
center: {
|
||
|
|
heading: "居中",
|
||
|
|
content: "所有卡片内容垂直居中对齐。",
|
||
|
|
footer: "包括页脚",
|
||
|
|
},
|
||
|
|
spaceBetween: {
|
||
|
|
heading: "两端对齐",
|
||
|
|
content: "所有卡片内容垂直两端对齐。",
|
||
|
|
footer: "包括页脚",
|
||
|
|
},
|
||
|
|
reversed: {
|
||
|
|
heading: "强制页脚底部",
|
||
|
|
content: "这是通过将 footer 放在 View 内并使用 `auto` flex 实现的。",
|
||
|
|
footer: "我在底部！",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
heading: "通过 `heading` 属性",
|
||
|
|
content: "通过 `content` 属性",
|
||
|
|
footer: "通过 `footer` 属性",
|
||
|
|
},
|
||
|
|
customComponent: {
|
||
|
|
name: "自定义组件",
|
||
|
|
description: "任何预配置的组件都可以替换为您自己的组件。您也可以添加其他组件。",
|
||
|
|
rightComponent: "右侧组件",
|
||
|
|
leftComponent: "左侧组件",
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
heading: "样式化的标题",
|
||
|
|
content: "样式化的内容",
|
||
|
|
footer: "样式化的页脚",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoAutoImage: {
|
||
|
|
description: "根据源图像的宽高比自动调整大小的图像组件，同时可以指定最大宽度或高度约束。",
|
||
|
|
useCase: {
|
||
|
|
remoteUri: { name: "远程 URI" },
|
||
|
|
base64Uri: { name: "Base64 URI" },
|
||
|
|
scaledToFitDimensions: {
|
||
|
|
name: "缩放适应尺寸",
|
||
|
|
description:
|
||
|
|
"提供 `maxWidth` 和/或 `maxHeight` 属性，图像将自动缩放并保持宽高比。这与 `resizeMode: 'contain'` 有何不同？首先，您可以只指定一边的尺寸（不必同时指定两边）。其次，图像将缩放以适应所需尺寸，而不仅仅是被包含在其图像容器内。",
|
||
|
|
heightAuto: "宽度: 60 / 高度: 自动",
|
||
|
|
widthAuto: "宽度: 自动 / 高度: 32",
|
||
|
|
bothManual: "宽度: 60 / 高度: 60",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoText: {
|
||
|
|
description: "用于显示文本的组件。此组件是对内置 React Native 组件的高阶封装。",
|
||
|
|
useCase: {
|
||
|
|
presets: {
|
||
|
|
name: "预设",
|
||
|
|
description: "有一些预配置的预设。",
|
||
|
|
default: "default 预设 - 适用于大多数情况的基本预设。",
|
||
|
|
bold: "bold 预设 - 用于粗体文本显示。",
|
||
|
|
subheading: "subheading 预设 - 用于副标题。",
|
||
|
|
heading: "heading 预设 - 用于标题。",
|
||
|
|
},
|
||
|
|
sizes: {
|
||
|
|
name: "尺寸",
|
||
|
|
description: "有一个 size 属性。",
|
||
|
|
xs: "xs - 超小尺寸。",
|
||
|
|
sm: "sm - 小尺寸。",
|
||
|
|
md: "md - 中等尺寸。",
|
||
|
|
lg: "lg - 大尺寸。",
|
||
|
|
xl: "xl - 超大尺寸。",
|
||
|
|
xxl: "xxl - 特大尺寸。",
|
||
|
|
},
|
||
|
|
weights: {
|
||
|
|
name: "字重",
|
||
|
|
description: "有一个 weight 属性。",
|
||
|
|
light: "light - 细体字重。",
|
||
|
|
normal: "normal - 常规字重。",
|
||
|
|
medium: "medium - 中等字重。",
|
||
|
|
semibold: "semiBold - 半粗字重。",
|
||
|
|
bold: "bold - 粗体字重。",
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
viaText: "通过 `text` 属性 - 传递纯文本内容。",
|
||
|
|
viaTx: "通过 `tx` 属性 -",
|
||
|
|
children: "子元素 - 可以传递子组件作为内容。",
|
||
|
|
nestedChildren: "嵌套子元素 -",
|
||
|
|
nestedChildren2: "支持多级嵌套。",
|
||
|
|
nestedChildren3: "可以混合使用不同类型的子元素。",
|
||
|
|
nestedChildren4: "非常灵活的内容传递方式。",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
text: "可以通过样式属性自定义文本外观。",
|
||
|
|
text2: "支持多种样式组合，如颜色、大小、字重等。",
|
||
|
|
text3: "也可以通过覆盖样式来实现更复杂的效果。",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoHeader: {
|
||
|
|
description: "出现在许多屏幕顶部的组件。将包含导航按钮和屏幕标题。",
|
||
|
|
useCase: {
|
||
|
|
actionIcons: {
|
||
|
|
name: "动作图标",
|
||
|
|
description: "您可以通过 `leftIcon` 或 `rightIcon` 属性轻松传递动作。",
|
||
|
|
leftIconTitle: "左侧图标",
|
||
|
|
rightIconTitle: "右侧图标",
|
||
|
|
bothIconsTitle: "两侧图标",
|
||
|
|
},
|
||
|
|
actionText: {
|
||
|
|
name: "动作文字",
|
||
|
|
description:
|
||
|
|
"您可以通过 `leftText` 或 `rightText` 属性轻松传递动作。您也可以使用 `leftTx` 或 `rightTx` 传递 Tx 翻译。",
|
||
|
|
leftTxTitle: "通过 `leftTx`",
|
||
|
|
rightTextTitle: "通过 `rightText`",
|
||
|
|
},
|
||
|
|
customActionComponents: {
|
||
|
|
name: "自定义动作组件",
|
||
|
|
description:
|
||
|
|
"如果图标或文字选项对您的用例不够灵活，您可以使用 `LeftActionComponent` 或 `RightActionComponent` 传递自己的自定义动作组件。",
|
||
|
|
customLeftActionTitle: "自定义左侧动作",
|
||
|
|
},
|
||
|
|
titleModes: {
|
||
|
|
name: "标题模式",
|
||
|
|
description: "标题可以强制保持在中心（默认）或在左动作按钮右侧弹性调整。",
|
||
|
|
centeredTitle: "居中",
|
||
|
|
flexTitle: "弹性",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
styledTitle: "样式化的标题",
|
||
|
|
styledWrapperTitle: "包装器样式",
|
||
|
|
tintedIconsTitle: "着色的图标",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
demoEmptyState: {
|
||
|
|
description: "用于在没有数据显示时使用的组件。可用于指导用户下一步该做什么。",
|
||
|
|
useCase: {
|
||
|
|
presets: {
|
||
|
|
name: "预设",
|
||
|
|
description: "您可以创建不同的预设。这是默认预设。",
|
||
|
|
},
|
||
|
|
passingContent: {
|
||
|
|
name: "传递内容",
|
||
|
|
description: "有几种不同的方式来传递内容。",
|
||
|
|
customizeImageHeading: "自定义图像",
|
||
|
|
customizeImageContent: "您可以传递任何 `ImageSource` 到 image 属性。",
|
||
|
|
viaHeadingProp: "通过 `heading` 属性",
|
||
|
|
viaContentProp: "通过 `content` 属性",
|
||
|
|
viaButtonProp: "通过 `button` 属性",
|
||
|
|
},
|
||
|
|
styling: {
|
||
|
|
name: "样式",
|
||
|
|
description: "组件可以轻松设置样式。",
|
||
|
|
styledHeading: "样式化的标题",
|
||
|
|
styledContent: "样式化的内容",
|
||
|
|
styledButton: "样式化的按钮",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
export default demoZh
|