【鸿蒙4.0】harmonyos Day 04

文章目录

一.Button按钮组件

1.声明Button组件,label是按钮文字

typescript 复制代码
Button(label?:ResourceStr) // ResourceStr:可以是普通字符串,也可以是引用定义好的字符串
  • 文字按钮
typescript 复制代码
Button('文字按钮')
  • 自定义按钮,在Button内嵌套其他组件
typescript 复制代码
Button(){
	Image($r('app.media.search')).width(20).margin(10)
}

2.添加属性和事件

typescript 复制代码
Button('文字按钮')
	.width(100)
	.height(30)
	.type(ButtonType.Normal) // 按钮类型
	// 按钮类型 
	// Capsule:胶囊型按钮(圆角默认为高度的一半)
	// Circle:圆角按钮。
	// Normal:普通按钮(不带圆角)。
	.onClick(() => {
		// 处理点击事件
	})

二.Slider滑动条组件

typescript 复制代码
Silder(option?:SliderOptions) // SliderOptions为滑动条的配置属性
Slider({
	min:0, // 最小值
	max:100, // 最大值
	value:40,// 当前值
	step:10, // 滑动步长 默认为1
	style:SliderStyle.OutSet, // 滑块在滑动条外边 InSet:滑块在滑动条里边
	direction:Axis.Horizontal, // 水平方向 vertical:垂直方向
	reverse:false // 是否反向滑动
})
.width('90%')
.showTips(true) // 是否显示value%
.blockColor('#36d') // 滑动条颜色
.onChange(value => {
	// value就是当前的滑块值
})
相关推荐
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜3 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1234 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js