提交 7814d46e 编写于 作者: Y yamila

update add 10+api

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 531c2c69
...@@ -62,6 +62,9 @@ struct RadioExample { ...@@ -62,6 +62,9 @@ struct RadioExample {
Column() { Column() {
Text('Radio1') Text('Radio1')
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50) .height(50)
.width(50) .width(50)
.onChange((isChecked: boolean) => { .onChange((isChecked: boolean) => {
...@@ -71,6 +74,9 @@ struct RadioExample { ...@@ -71,6 +74,9 @@ struct RadioExample {
Column() { Column() {
Text('Radio2') Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50) .height(50)
.width(50) .width(50)
.onChange((isChecked: boolean) => { .onChange((isChecked: boolean) => {
...@@ -80,6 +86,9 @@ struct RadioExample { ...@@ -80,6 +86,9 @@ struct RadioExample {
Column() { Column() {
Text('Radio3') Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50) .height(50)
.width(50) .width(50)
.onChange((isChecked: boolean) => { .onChange((isChecked: boolean) => {
...@@ -90,4 +99,4 @@ struct RadioExample { ...@@ -90,4 +99,4 @@ struct RadioExample {
} }
} }
``` ```
![](figures/radio.gif) ![radio](figures/radio.gif)
...@@ -66,9 +66,9 @@ Search(options?: { value?: string; placeholder?: ResourceStr; icon?: string; con ...@@ -66,9 +66,9 @@ Search(options?: { value?: string; placeholder?: ResourceStr; icon?: string; con
| 名称 | 描述 | | 名称 | 描述 |
| ----------------------- | ---------------- | | ----------------------- | ---------------- |
| CONSTANT<sup>10+</sup> | 清除按钮常显样式。 | | CONSTANT | 清除按钮常显样式。 |
| INVISIBLE<sup>10+</sup> | 清除按钮常隐样式。 | | INVISIBLE | 清除按钮常隐样式。 |
| INPUT<sup>10+</sup> | 清除按钮输入样式。 | | INPUT | 清除按钮输入样式。 |
## 事件 ## 事件
...@@ -104,6 +104,8 @@ caretPosition(value: number): void ...@@ -104,6 +104,8 @@ caretPosition(value: number): void
## 示例 ## 示例
### 示例1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -119,7 +121,7 @@ struct SearchExample { ...@@ -119,7 +121,7 @@ struct SearchExample {
Text('onChange:' + this.changeValue).fontSize(18).margin(15) Text('onChange:' + this.changeValue).fontSize(18).margin(15)
Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
.searchButton('SEARCH') .searchButton('SEARCH')
.width(400) .width('95%')
.height(40) .height(40)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey) .placeholderColor(Color.Grey)
...@@ -143,3 +145,43 @@ struct SearchExample { ...@@ -143,3 +145,43 @@ struct SearchExample {
``` ```
![search](figures/search.gif) ![search](figures/search.gif)
### 示例2
```ts
// xxx.ets
@Entry
@Component
struct SearchButtoonExample {
@State submitValue: string = ''
build() {
Column() {
Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
Search({ placeholder: 'Type to search...' })
.searchButton('SEARCH')
.searchIcon({
src: $r('app.media.search')
})
.cancelButton({
style: CancelButtonStyle.CONSTANT,
icon: {
src: $r('app.media.cancel')
}
})
.width('90%')
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => {
this.submitValue = value
})
.margin(20)
}.width('100%')
}
}
```
![searchButton](figures/searchButton.gif)
\ No newline at end of file
...@@ -29,7 +29,7 @@ Counter() ...@@ -29,7 +29,7 @@ Counter()
## 事件 ## 事件
不支持通用事件和手势, 仅支持如下事件: 除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册