提交 97be866c 编写于 作者: Y yamila

update span

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 a9470625
......@@ -304,7 +304,7 @@ deleteSpans(value?: RichEditorRange): void
| fontSize | [Length](ts-types.md#length) \| number | 否 | 字体大小。 <br/>默认值:16fp。|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 字体样式。<br/>默认值:FontStyle.Normal。 |
| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 字体粗细。<br/>number类型取值[100,900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。<br/>默认值:FontWeight.Normal。 |
| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | 否 | 设置字体列表。默认字体'HarmonyOS Sans',且当前只支持这种字体<br/>默认字体:'HarmonyOS Sans'。|
| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | 否 | 设置字体列表。默认字体'HarmonyOS Sans',当前支持'HarmonyOS Sans'字体和[注册自定义字体](../apis/js-apis-font.md)<br/>默认字体:'HarmonyOS Sans'。|
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 否 | 设置文本装饰线样式及其颜色。<br />默认值:{<br/>type:&nbsp;TextDecorationType.None,<br/>color:Color.Black<br/>}。 |
......
......@@ -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)
......@@ -53,7 +53,6 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| selectionMenuHidden<sup>10+</sup> | boolean | 设置长按输入框或者右键输入框时,是否弹出文本选择菜单。<br />默认值:false |
| barState<sup>10+</sup> | [BarState](ts-appendix-enums.md#BarState) | 设置内联输入风格编辑态时滚动条的显示模式。<br/>默认值:BarState.Auto |
| maxLines<sup>10+</sup> | number | 设置内联输入风格编辑态时文本可显示的最大行数。<br/>默认值:3 |
> **说明:**
>
> [通用属性padding](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 8 vp,<br>&nbsp;right: 16 vp,<br>&nbsp;bottom: 8 vp,<br>&nbsp;left: 16 vp<br> }
......@@ -248,17 +247,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)
......@@ -269,30 +271,49 @@ 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)
......@@ -156,7 +156,7 @@
| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| size | [Length](#length) | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。不支持设置百分比字符串。<br>默认值:16.0 |
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,取值越大,字体越粗。<br>默认值: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) | 否 | 设置文本的字体样式。<br>默认值:FontStyle.Normal |
## Area<sup>8+</sup>
......
......@@ -17,7 +17,7 @@
| fontSize | [Length](ts-types.md#length) | 设置字体大小,Length为number类型时,使用fp单位。字体默认大小16。不支持设置百分比字符串。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置字体样式。<br>默认值:FontStyle.Normal<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如"400",以及"bold"、"bolder"、"lighter"、"regular"、"medium",分别对应FontWeight中相应的枚举值。<br/>默认值:FontWeight.Normal<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans',且当前只支持这种字体<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans',当前支持'HarmonyOS Sans'字体和[注册自定义字体](../apis/js-apis-font.md)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值:{<br/>type:&nbsp;TextDecorationType.None,<br/>color:Color.Black<br/>}<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......
......@@ -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)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册