Skip to content

D
Docs

Tonvia / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 cf84857a 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 60672a1a
隐藏空白更改
内联 并排
Showing with 57 addition and 62 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ cf84857a
...@@ -44,8 +44,8 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B ...@@ -44,8 +44,8 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
@Entry @Entry
@Component @Component
struct ScrollBarExample { struct ScrollBarExample {
private scroller: Scroller = new Scroller(); private scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() { build() {
Column() { Column() {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ cf84857a
...@@ -61,7 +61,7 @@ struct SelectExample { ...@@ -61,7 +61,7 @@ struct SelectExample {
.selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelect((index: number) => { .onSelect((index: number) => {
console.info("Select:" + index); console.info("Select:" + index)
}) })
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ cf84857a
...@@ -48,14 +48,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin ...@@ -48,14 +48,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
@Entry @Entry
@Component @Component
struct TextPickerExample { struct TextPickerExample {
private select: number = 1; private select: number = 1
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']; private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
build() { build() {
Column() { Column() {
TextPicker({range: this.fruits, selected: this.select}) TextPicker({range: this.fruits, selected: this.select})
.onChange((value: string, index: number) => { .onChange((value: string, index: number) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index); console.info('Picker item changed, value: ' + value + ', index: ' + index)
}) })
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ cf84857a
...@@ -50,8 +50,8 @@ Refresh\(value: \{ refreshing: boolean, offset?: number&nbsp;|&nbsp;string , fr ...@@ -50,8 +50,8 @@ Refresh\(value: \{ refreshing: boolean, offset?: number&nbsp;|&nbsp;string , fr
@Entry @Entry
@Component @Component
struct RefreshExample { struct RefreshExample {
@State isRefreshing: boolean = false; @State isRefreshing: boolean = false
@State counter: number = 0; @State counter: number = 0
build() { build() {
Column() { Column() {
...@@ -61,14 +61,14 @@ struct RefreshExample { ...@@ -61,14 +61,14 @@ struct RefreshExample {
.margin(10) .margin(10)
} }
.onStateChange((refreshStatus: RefreshStatus) => { .onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus); console.info('Refresh onStatueChange state is ' + refreshStatus)
}) })
.onRefreshing(() => { .onRefreshing(() => {
setTimeout(() => { setTimeout(() => {
this.counter++; this.counter++
this.isRefreshing = false; this.isRefreshing = false
}, 1000) }, 1000)
console.log('onRefreshing test'); console.log('onRefreshing test')
}) })
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ cf84857a
...@@ -20,27 +20,27 @@ SideBarContainer( type?: SideBarContainerType ) ...@@ -20,27 +20,27 @@ SideBarContainer( type?: SideBarContainerType )
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | [SideBarContainerType](#SideBarContainerType枚举说明) | 否 | 设置侧边栏的显示类型。<br/>默认值：SideBarContainerType.Embed | | type | SideBarContainerType | 否 | 设置侧边栏的显示类型。<br/>默认值：SideBarContainerType.Embed |
## SideBarContainerType枚举说明 ## SideBarContainerType枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | -------- | -------- |
| Embed | 侧边栏嵌入到组件内，和内容区并列显示。 | | Embed | 侧边栏嵌入到组件内，和内容区并列显示。 |
| Overlay | 侧边栏悬浮在内容区上面显示。 | | Overlay | 侧边栏浮在内容区上面。 |
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值：false | | showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值：true |
| controlButton | [ButtonStyle](#buttonstyle对象说明) | 设置侧边栏控制按钮的属性，包括定位，尺寸，图表等。 | | controlButton | ButtonStyle | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | 设置是否显示控制按钮。<br/>默认值：true | | showControlButton | boolean | 设置是否显示控制按钮。<br/>默认值：true |
| sideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏的宽度。<br/>默认值：200，单位vp | | sideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏的宽度。<br/>默认值：200，单位vp |
| minSideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏最小宽度。<br/>默认值：200，单位vp | | minSideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏最小宽度。<br/>默认值：200，单位vp |
| maxSideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏最大宽度。<br/>默认值：280，单位vp | | maxSideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏最大宽度。<br/>默认值：280，单位vp |
| autoHide<sup>9+</sup> | boolean | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。<br/>默认值：true | | autoHide<sup>9+</sup> | boolean | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。<br/>默认值：true |
| sideBarPosition<sup>9+</sup> | [SideBarPosition](#sidebarposition9枚举说明) | 设置侧边栏显示位置。<br/>默认值：SideBarPosition.Start | | sideBarPosition<sup>9+</sup> | SideBarPosition | 设置侧边栏显示位置。<br/>默认值：SideBarPosition.Start |
## ButtonStyle对象说明 ## ButtonStyle对象说明
...@@ -59,6 +59,13 @@ SideBarContainer( type?: SideBarContainerType ) ...@@ -59,6 +59,13 @@ SideBarContainer( type?: SideBarContainerType )
| Start | 侧边栏位于容器左侧。 | | Start | 侧边栏位于容器左侧。 |
| End | 侧边栏位于容器右侧。 | | End | 侧边栏位于容器右侧。 |
## SideBarPosition<sup>9+</sup>枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 侧边栏位于容器左侧。 |
| End | 侧边栏位于容器右侧。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
...@@ -73,13 +80,14 @@ SideBarContainer( type?: SideBarContainerType ) ...@@ -73,13 +80,14 @@ SideBarContainer( type?: SideBarContainerType )
@Entry @Entry
@Component @Component
struct SideBarContainerExample { struct SideBarContainerExample {
normalIcon: Resource = $r("app.media.icon"); normalIcon : Resource = $r("app.media.icon")
selectedIcon: Resource = $r("app.media.icon"); selectedIcon: Resource = $r("app.media.icon")
@State arr: number[] = [1, 2, 3]; @State arr: number[] = [1, 2, 3]
@State current: number = 1; @State current: number = 1
build() { build() {
SideBarContainer(SideBarContainerType.Embed) { SideBarContainer(SideBarContainerType.Embed)
{
Column() { Column() {
ForEach(this.arr, (item, index) => { ForEach(this.arr, (item, index) => {
Column({ space: 5 }) { Column({ space: 5 }) {
...@@ -90,41 +98,28 @@ struct SideBarContainerExample { ...@@ -90,41 +98,28 @@ struct SideBarContainerExample {
.fontFamily('source-sans-pro,cursive,sans-serif') .fontFamily('source-sans-pro,cursive,sans-serif')
} }
.onClick(() => { .onClick(() => {
this.current = item; this.current = item
}) })
}, item => item) }, item => item)
}.width('100%') }.width('100%')
.justifyContent(FlexAlign.SpaceEvenly) .justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor('#19000000') .backgroundColor('#19000000')
Column() { Column() {
Text('SideBarContainer content text.').fontSize(20) Text('SideBarContainer content text1').fontSize(25)
Text('SideBarContainer content text2').fontSize(25)
} }
.margin({ top: 50, left: 20, right: 30 }) .margin({ top: 50, left: 20, right: 30 })
} }
.showSideBar(true) // 显示侧边栏 .sideBarWidth(150)
.controlButton({ .minSideBarWidth(50)
width: 30, .maxSideBarWidth(300)
height: 30,
left: 30,
top: 30
}) // 控制按钮属性
.showControlButton(true) // 展示控制按钮
.sideBarWidth(150) // 侧边栏宽度
.minSideBarWidth(50) // 侧边栏最小宽度
.maxSideBarWidth(300) //侧边栏最大宽度
.autoHide(true)
.sideBarPosition(SideBarPosition.Start) //侧边栏位于容器左侧
.onChange((value: boolean) => { .onChange((value: boolean) => {
console.info('status:' + value); console.info('status:' + value)
}) })
} }
} }
``` ```
SideBarContainerType为Embed效果如下：
![](figures/sidebarContainer1.gif)
SideBarContainerType为Ovelay时效果如下：
![](figures/sidebarContainer2.gif) ![](figures/sidebarcontainer.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ cf84857a
...@@ -22,22 +22,22 @@ ...@@ -22,22 +22,22 @@
@Entry @Entry
@Component @Component
struct TouchAbleExample { struct TouchAbleExample {
@State text1: string = ''; @State text1: string = ''
@State text2: string = ''; @State text2: string = ''
build() { build() {
Stack() { Stack() {
Rect() Rect()
.fill(Color.Gray).width(150).height(150) .fill(Color.Gray).width(150).height(150)
.onClick(() => { .onClick(() => {
console.info(this.text1 = 'Rect Clicked'); console.info(this.text1 = 'Rect Clicked')
}) })
.overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Ellipse() Ellipse()
.fill(Color.Pink).width(150).height(80) .fill(Color.Pink).width(150).height(80)
.touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked” .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked”
.onClick(() => { .onClick(() => {
console.info(this.text2 = 'Ellipse Clicked'); console.info(this.text2 = 'Ellipse Clicked')
}) })
.overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}.margin(100) }.margin(100)
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ cf84857a
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
@Entry @Entry
@Component @Component
struct PopupExample { struct PopupExample {
@State handlePopup: boolean = false; @State handlePopup: boolean = false
@State customPopup: boolean = false; @State customPopup: boolean = false
// popup构造器定义弹框内容 // popup构造器定义弹框内容
@Builder popupBuilder() { @Builder popupBuilder() {
...@@ -63,7 +63,7 @@ struct PopupExample { ...@@ -63,7 +63,7 @@ struct PopupExample {
// PopupOptions 类型设置弹框内容 // PopupOptions 类型设置弹框内容
Button('PopupOptions') Button('PopupOptions')
.onClick(() => { .onClick(() => {
this.handlePopup = !this.handlePopup; this.handlePopup = !this.handlePopup
}) })
.bindPopup(this.handlePopup, { .bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions', message: 'This is a popup with PopupOptions',
...@@ -72,22 +72,22 @@ struct PopupExample { ...@@ -72,22 +72,22 @@ struct PopupExample {
primaryButton: { primaryButton: {
value: 'confirm', value: 'confirm',
action: () => { action: () => {
this.handlePopup = !this.handlePopup; this.handlePopup = !this.handlePopup
console.info('ok Button click') console.info('confirm Button click')
} }
}, },
// 第二个按钮 // 第二个按钮
secondaryButton: { secondaryButton: {
value: 'cancle', value: 'cancel',
action: () => { action: () => {
this.handlePopup = !this.handlePopup; this.handlePopup = !this.handlePopup;
console.info('cancle Button click') console.info('cancel Button click')
} }
}, },
onStateChange: (e) => { onStateChange: (e) => {
console.info(e.isVisible.toString()) console.info(e.isVisible.toString())
if (!e.isVisible) { if (!e.isVisible) {
this.handlePopup = false; this.handlePopup = false
} }
} }
}) })
...@@ -97,7 +97,7 @@ struct PopupExample { ...@@ -97,7 +97,7 @@ struct PopupExample {
// CustomPopupOptions 类型设置弹框内容 // CustomPopupOptions 类型设置弹框内容
Button('CustomPopupOptions') Button('CustomPopupOptions')
.onClick(() => { .onClick(() => {
this.customPopup = !this.customPopup; this.customPopup = !this.customPopup
}) })
.bindPopup(this.customPopup, { .bindPopup(this.customPopup, {
builder: this.popupBuilder, builder: this.popupBuilder,
...@@ -108,7 +108,7 @@ struct PopupExample { ...@@ -108,7 +108,7 @@ struct PopupExample {
showInSubWindow: false, showInSubWindow: false,
onStateChange: (e) => { onStateChange: (e) => {
if (!e.isVisible) { if (!e.isVisible) {
this.customPopup = false; this.customPopup = false
} }
} }
}) })
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ cf84857a
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
@Entry @Entry
@Component @Component
struct ClickExample { struct ClickExample {
@State text: string = ''; @State text: string = ''
build() { build() {
Column() { Column() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或