diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/TextInputError.png b/zh-cn/application-dev/reference/arkui-ts/figures/TextInputError.png new file mode 100644 index 0000000000000000000000000000000000000000..a41f17247d720f8d526e5d5eb4f9f443fbab4aa6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/TextInputError.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/showUnit.png b/zh-cn/application-dev/reference/arkui-ts/figures/showUnit.png deleted file mode 100644 index 4b60beda19ba2c6e314dcb0632d5d5953f79a952..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/showUnit.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/span.png b/zh-cn/application-dev/reference/arkui-ts/figures/span.png index 881f4945dac79e31cb9f11216a682110de4efec7..84f2d46cba0a6abd0cf83627c984d843ffb40719 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/span.png and b/zh-cn/application-dev/reference/arkui-ts/figures/span.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md index 05630ed28fb7009a2aa0e189c8497e0be5a30a61..394eaf61e4f401e2f3e08b1db250434305ed8f70 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md @@ -309,7 +309,7 @@ deleteSpans(value?: RichEditorRange): void | fontSize | [Length](ts-types.md#length) \| number | 否 | 字体大小。
默认值：16fp。| | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 字体样式。
默认值：FontStyle.Normal。 | | fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 字体粗细。
number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。
string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。
默认值：FontWeight.Normal。 | -| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | 否 | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。
默认字体:'HarmonyOS Sans'。| +| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | 否 | 设置字体列表。默认字体'HarmonyOS Sans'，当前支持'HarmonyOS Sans'字体和[注册自定义字体](../apis/js-apis-font.md)。
默认字体:'HarmonyOS Sans'。| | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 否 | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
}。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md index 1efe13048c4d18031dd46efbae7fe954b285dd89..cbce408815b43780b16ad0a9b185200b257000ec 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -58,6 +58,12 @@ struct SpanExample { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('In Line') + Span(' Component') + Span(' !') + } + Text() { Span('This is the Span component').fontSize(12).textCase(TextCase.Normal) .decoration({ type: TextDecorationType.None, color: Color.Red }) @@ -118,4 +124,4 @@ struct SpanExample { } ``` -![span](figures/span.png) +![Span](figures/Span.PNG) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 8ad91516afe8e6969767fdc6305f58b82c9f0013..b411a603d3ea49952d28ce7aaab97e2880a2a310 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -53,7 +53,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | selectionMenuHidden10+ | boolean | 设置长按输入框或者右键输入框时，是否弹出文本选择菜单。
默认值：false | | barState10+ | [BarState](ts-appendix-enums.md#BarState) | 设置内联输入风格编辑态时滚动条的显示模式。
默认值：BarState.Auto | | maxLines10+ | number | 设置内联输入风格编辑态时文本可显示的最大行数。
默认值：3 | -| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明：**
当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件，针对系统键盘的enterKeyType属性设置将无效。
自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点，但是会拦截手势事件。
默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过[TextInputController](#textinputcontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。 | +| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明：**
当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件，针对系统键盘的enterKeyType属性设置将无效。
自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点，但是会拦截手势事件。
默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过[TextInputController](#textinputcontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。 | > **说明：** > @@ -249,17 +249,20 @@ struct TextInputExample { ### 示例2 ```ts -// xxx.ets @Entry @Component struct TextInputExample { - @State PassWordSrc1:Resource=$r('app.media.icon') - @State PassWordSrc2:Resource=$r('app.media.icon') + @State PassWordSrc1: Resource = $r('app.media.onIcon') + @State PassWordSrc2: Resource = $r('app.media.offIcon') + @State TextError: string = undefined + @State Text: string = '' + @State NameText: string = 'test' + @Builder itemEnd() { Select([{ value: 'KB' }, { value: 'MB' }, - { value: 'GB'}, - { value: 'TB',}]) + { value: 'GB' }, + { value: 'TB', }]) .height("48vp") .borderRadius(0) .selected(2) @@ -270,33 +273,52 @@ struct TextInputExample { .selectedOptionFont({ size: 20, weight: 400 }) .optionFont({ size: 20, weight: 400 }) .backgroundColor(Color.Transparent) - .responseRegion({height:"40vp",width:"80%",x:'10%',y:'6vp'}) + .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' }) .onSelect((index: number) => { console.info('Select:' + index) }) } build() { - Column() { + Column({ space: 20 }) { // 自定义密码显示图标 TextInput({ placeholder: 'user define password icon' }) .type(InputType.Password) - .width(400) + .width(380) .height(60) - .passwordIcon({onIconSrc:this.PassWordSrc1,offIconSrc : this.PassWordSrc2}) + .passwordIcon({ onIconSrc: this.PassWordSrc1, offIconSrc: this.PassWordSrc2 }) // 下划线模式 TextInput({ placeholder: 'underline style' }) .showUnderline(true) - .width(400) + .width(380) .height(60) .showError('Error') .showUnit(this.itemEnd.bind(this)) + + Text(`用户名：${this.Text}`) + .width('95%') + TextInput({ placeholder: '请输入用户名', text: this.Text }) + .showUnderline(true) + .width(380) + .showError(this.TextError) + .onChange((value: string) => { + this.Text = value + }) + .onSubmit(() => { // 用户名不正确会清空输入框和用户名并提示错误文本 + if (this.Text == this.NameText) { + this.TextError = undefined + } else { + this.TextError = '用户名输入错误' + this.Text = '' + } + }) + }.width('100%') } } ``` -![showUnit](figures/showUnit.png) +![TextInputError](figures/TextInputError.png) ### 示例3 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md index 2ff639bc04520a505f69c99d097fb382a44c93c9..97a6f64768c1d6420dfc7f83fd88d41b7da6b731 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-types.md @@ -156,7 +156,7 @@ | ------ | ---------------------------------------- | ---- | ---------------------------------------- | | size | [Length](#length) | 否 | 设置文本尺寸，Length为number类型时，使用fp单位。不支持设置百分比字符串。
默认值：16.0 | | weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。
默认值：400 \| FontWeight.Normal | -| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, HarmonyOS Sans'。当前只支持'HarmonyOS Sans'字体。 | +| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, HarmonyOS Sans'。当前支持'HarmonyOS Sans'字体和[注册自定义字体](../apis/js-apis-font.md)。 | | style | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。
默认值：FontStyle.Normal | ## Area8+ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 55e901fe2362de3b929c272671142e1f9f1c3e00..68ad07116f008df6de2b3b1a8fc2f30a5e46e4c0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -17,7 +17,7 @@ | fontSize | [Length](ts-types.md#length) | 设置字体大小，Length为number类型时，使用fp单位。字体默认大小16。不支持设置百分比字符串。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置字体样式。
默认值：FontStyle.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。
默认值：FontWeight.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| fontFamily | string \| [Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| fontFamily | string \| [Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans'，当前支持'HarmonyOS Sans'字体和[注册自定义字体](../apis/js-apis-font.md)。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
}
从API version 9开始，该接口支持在ArkTS卡片中使用。 | diff --git a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md index 20cd4da27de0365db69a3e60a155445fbde8bb27..5e75221ed6bca95f7b9be51cb7732c594121ff06 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md @@ -546,7 +546,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器 ```ts Flex() { Text('flexGrow(1)') - .flexGrow(2) + .flexGrow(1) .width(100) .height(100) .backgroundColor(0xF5DEB3)