Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

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