Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 e60d0802 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!20765 tabs补充示例 

Merge pull request !20765 from sunjiakun/tabs0711
上级 f16ff049 b20bc922
隐藏空白更改
内联 并排
Showing with 551 addition and 2 deletion
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ e60d0802
......@@ -74,7 +74,7 @@ SubTabBarStyle的静态构造函数。
| indicator<sup>10+</sup> | [IndicatorStyle](#indicatorstyle10对象说明)| 设置选中子页签的下划线风格。子页签的下划线风格仅在水平模式下有效。<br /> |
| selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10枚举说明) | 设置选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR |
| board<sup>10+</sup> | [BoardStyle](#boardstyle10对象说明) | 设置选中子页签的背板风格。 |
| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置选中子页签的label文本和字体的样式。 |
| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 |
## IndicatorStyle<sup>10+</sup>对象说明
......@@ -399,3 +399,290 @@ struct TabBarStyleExample {
```
![tabbarStyle](figures/TabBarStyle.jpeg)
示例4：
```ts
// xxx.ets
@Entry
@Component
struct TabsAttr {
private controller: TabsController = new TabsController()
@State indicatorColor: Color = Color.Blue;
@State indicatorWidth: number = 40;
@State indicatorHeight: number = 10;
@State indicatorBorderRadius: number = 5;
@State indicatorSpace: number = 10;
@State subTabBorderRadius: number = 20;
@State selectedMode: SelectedMode = SelectedMode.INDICATOR;
private colorFlag: boolean = true;
private widthFlag: boolean = true;
private heightFlag: boolean = true;
private borderFlag: boolean = true;
private spaceFlag: boolean = true;
build() {
Column() {
Button("下划线颜色变化").width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
if (this.colorFlag) {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorColor = Color.Red
})
} else {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorColor = Color.Yellow
})
}
this.colorFlag = !this.colorFlag
})
Button("下划线高度变化").width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
if (this.heightFlag) {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorHeight = 20
})
} else {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorHeight = 10
})
}
this.heightFlag = !this.heightFlag
})
Button("下划线宽度变化").width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
if (this.widthFlag) {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorWidth = 30
})
} else {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorWidth = 50
})
}
this.widthFlag = !this.widthFlag
})
Button("下划线圆角半径变化").width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
if (this.borderFlag) {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorBorderRadius = 0
})
} else {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorBorderRadius = 5
})
}
this.borderFlag = !this.borderFlag
})
Button("下划线间距变化").width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
// 对Button组件的宽高属性进行动画配置
if (this.spaceFlag) {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorSpace = 20
})
} else {
animateTo({
duration: 1000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 200, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info('play end')
}
}, () => {
this.indicatorSpace = 10
})
}
this.spaceFlag = !this.spaceFlag
})
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')
}.tabBar(SubTabBarStyle.of('pink')
.indicator({
color: this.indicatorColor, //下划线颜色
height: this.indicatorHeight, //下划线高度
width: this.indicatorWidth, //下划线宽度
borderRadius: this.indicatorBorderRadius, //下划线圆角半径
marginTop: this.indicatorSpace //下划线与文字间距
})
.selectedMode(this.selectedMode)
.board({ borderRadius: this.subTabBorderRadius })
.labelStyle({})
)
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp')
}.tabBar('yellow')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp')
}.tabBar('blue')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp')
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp')
}.tabBar('gray')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp')
}.tabBar('orange')
}
.vertical(false).scrollable(true)
.barMode(BarMode.Scrollable)
.barHeight(140).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.backgroundColor(0xF5F5F5).height(320)
}.width('100%').height(250).padding({top: '24vp', left: '24vp', right: '24vp'})
}
}
```
![tabContent3](figures/tabContent3.gif)
示例5：
```ts
// xxx.ets
@Entry
@Component
struct TabsTextOverflow {
@State message: string = 'Hello World'
private controller: TabsController = new TabsController()
@State subTabOverflowOpaque: boolean = true;
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column(){
Text('单行省略号截断').fontSize(30).fontColor(0xFF000000)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束')
.labelStyle({ overflow: TextOverflow.Ellipsis, maxLines: 1, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
font: { size: 20 } }))
TabContent() {
Column()
{
Text('先缩小再截断').fontSize(30).fontColor(0xFF000000)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
font: { size: 20 } }))
TabContent() {
Column(){
Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
font: { size: 20 } }))
TabContent() {
Column() {
Text('换行').fontSize(30).fontColor(0xFF000000)
}
.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
font: { size: 20 } }))
}
.vertical(true).scrollable(true)
.barMode(BarMode.Fixed)
.barHeight(720)
.barWidth(200).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.height('100%').width('100%')
}
.height('100%')
}
}
```
![tabContent4](figures/tabContent4.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ e60d0802
......@@ -98,6 +98,8 @@ changeIndex(value: number): void
## 示例
示例1：
```ts
// xxx.ets
@Entry
......@@ -159,4 +161,264 @@ struct TabsExample {
}
```
![tabs2](figures/tabs2.gif)
\ No newline at end of file
![tabs2](figures/tabs2.gif)
示例2：
```ts
// xxx.ets
@Entry
@Component
struct TabsDivider1 {
private controller1: TabsController = new TabsController()
@State dividerColor: string = 'red'
@State strokeWidth: number = 2
@State startMargin: number = 0
@State endMargin: number = 0
@State nullFlag: boolean = false
build() {
Column() {
Tabs({ controller: this.controller1 }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar('pink')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow)
}.tabBar('yellow')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}.tabBar('blue')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Red)
}.tabBar('red')
}
.vertical(true)
.scrollable(true)
.barMode(BarMode.Fixed)
.barWidth(70)
.barHeight(200)
.animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.height('200vp')
.margin({bottom: '12vp'})
.divider(this.nullFlag ? null :{
strokeWidth: this.strokeWidth,
color: this.dividerColor,
startMargin: this.startMargin,
endMargin: this.endMargin
})
Button('常规Divider').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.nullFlag = false,
this.strokeWidth = 2,
this.dividerColor = 'red',
this.startMargin = 0,
this.endMargin = 0
})
Button('空Divider').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.nullFlag = true
})
Button('颜色变为蓝色').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.dividerColor = 'blue'
})
Button('宽度增加').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.strokeWidth += 2
})
Button('宽度减小').width('100%').margin({bottom: '12vp'})
.onClick(() => {
if(this.strokeWidth > 2) {
this.strokeWidth -= 2
}
})
Button('上边距增加').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.startMargin += 2
})
Button('上边距减少').width('100%').margin({bottom: '12vp'})
.onClick(() => {
if (this.startMargin > 2) {
this.startMargin -= 2
}
})
Button('下边距增加').width('100%').margin({bottom: '12vp'})
.onClick(() => {
this.endMargin += 2
})
Button('下边距减少').width('100%').margin({bottom: '12vp'})
.onClick(() => {
if(this.endMargin > 2) {
this.endMargin -= 2
}
})
}.padding({top: '24vp', left: '24vp', right: '24vp'})
}
}
```
![tabs3](figures/tabs3.gif)
示例3：
```ts
// xxx.ets
@Entry
@Component
struct TabsOpaque {
@State message: string = 'Hello World'
private controller: TabsController = new TabsController()
private controller1: TabsController = new TabsController()
@State selfFadingFade: boolean = true;
build() {
Column() {
Button('子页签设置渐隐').width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
this.selfFadingFade = true;
})
Button('子页签设置不渐隐').width('100%').margin({bottom: '12vp'})
.onClick((event: ClickEvent) => {
this.selfFadingFade = false;
})
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar('pink')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow)
}.tabBar('yellow')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}.tabBar('blue')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
}
.vertical(false).scrollable(true)
.barMode(BarMode.Scrollable)
.barHeight(80).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.fadingEdge(this.selfFadingFade)
.height('30%').width('100%')
Tabs({ barPosition: BarPosition.Start, controller: this.controller1 }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar('pink')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow)
}.tabBar('yellow')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}.tabBar('blue')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar('green')
}
.vertical(true).scrollable(true)
.barMode(BarMode.Scrollable)
.barHeight(200)
.barWidth(80).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.fadingEdge(this.selfFadingFade)
.height('30%').width('100%')
}
.padding({top: '24vp', left: '24vp', right: '24vp'})
}
}
```
![tabs4](figures/tabs4.gif)
示例4：
```ts
// xxx.ets
@Entry
@Component
struct barBackgroundColorTest {
private controller: TabsController = new TabsController()
@State barOverlap: boolean = true;
@State barBackgroundColor: string = '#88888888';
build() {
Column() {
Button("barOverlap变化").width('100%').margin({bottom: '12vp'})
.onClick((event:ClickEvent) =>{
if (this.barOverlap) {
this.barOverlap = false;
} else {
this.barOverlap = true;
}
})
Tabs({ barPosition: BarPosition.Start, index:0, controller: this.controller }) {
TabContent() {
Column() {
Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
}.width('100%').width('100%').height('100%')
.backgroundColor(Color.Pink)
}
.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "1"))
TabContent() {
Column() {
Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
}.width('100%').width('100%').height('100%')
.backgroundColor(Color.Yellow)
}
.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "2"))
TabContent() {
Column() {
Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
}.width('100%').width('100%').height('100%')
.backgroundColor(Color.Green)
}
.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "3"))
}
.vertical(false)
.barMode(BarMode.Fixed)
.height('60%')
.barOverlap(this.barOverlap)
.scrollable(true)
.animationDuration(10)
.barBackgroundColor(this.barBackgroundColor)
}
.height(500)
.padding({top: '24vp', left: '24vp', right: '24vp'})
}
}
```
![tabs5](figures/tabs5.gif)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或