回复
HarmonyOS Developer 常见组件开发指导
丶龙八夷
发布于 2023-3-27 17:05
浏览
0收藏
text开发指导
text是文本组件，用于呈现一段文本信息。具体用法请参考text API。
创建text组件
在pages/index目录下的hml文件中创建一个text组件。
<!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text>Hello World</text>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
设置text组件样式和属性
- 添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
- 添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 text自有样式。
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
This is a passage
</text>
<text style="text-decoration:line-through;text-decoration-color: red">
This is a passage
</text>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
text{
font-size: 50px;
}
- 隐藏文本内容
当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
}
.text{
width: 200px;
max-lines: 1;
text-overflow:ellipsis;
}
说明
- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
- max-lines属性设置文本最多可以展示的行数。
- 设置文本折行
设置word-break属性对文本内容做断行处理，word-break枚举值请参考text自有样式。
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text1{
width: 100%;
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
text-align: center;
word-break: break-word;
font-size: 40px;
}
.text2{
width: 100%;
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
font-size: 40px;
}
- text组件支持Span子组件
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1
</span>
<span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span>
<span style="color: red;"> passage </span>
</text>
</div>
说明
- 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
- 在使用Span子组件时，注意text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
场景示例
text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
<!-- xxx.hml -->
<div class="container">
<div style="align-items: center;justify-content: center;">
<text class="title">
{{ content }}
</text>
<switch checked="true" onchange="test"></switch>
</div>
<text class="span-container" style="color: #ff00ff;">
<span show="{{isShow}}"> {{ content }} </span>
<span style="color: white;">
1
</span>
<span style="color: #f76160">Hide clip </span>
</text>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #F1F3F5;
}
.title {
font-size: 26px;
text-align:center;
width: 200px;
height: 200px;
}
// xxx.js
export default {
data: {
isShow:true,
content: 'Hello World'
},
onInit(){ },
test(e) {
this.isShow = e.checked
}
}
input开发指导
input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考input API。
创建input组件
在pages/index目录下的hml文件中创建一个input组件。
<!-- xxx.hml -->
<div class="container">
<input type="text">
Please enter the content
</input>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
设置input类型
通过设置type属性来定义input类型，如将input设置为button、date等。
<!-- xxx.hml -->
<div class="container">
<div class="div-button">
<dialog class="dialogClass" id="dialogId">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
<input class="button" type="button" value="click" onclick="btnclick"></input>
</div>
<div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div>
<div class="content">
<input type="date" class="flex" placeholder="Enter data"></input>
</div>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #F1F3F5 ;
}
.div-button {
flex-direction: column;
align-items: center;
}
.dialogClass{
width:80%;
height: 200px;
}
.button {
margin-top: 30px;
width: 50%;
}
.content{
width: 90%;
height: 150px;
align-items: center;
justify-content: center;
}
.flex {
width: 80%;
margin-bottom:40px;
}
// xxx.js
export default {
btnclick(){
this.$element('dialogId').show()
},
}
说明
仅当input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。
事件绑定
向input组件添加search和translate事件。
<!-- xxx.hml -->
<div class="content">
<text style="margin-left: -7px;">
<span>Enter text and then touch and hold what you've entered</span>
</text>
<input class="input" type="text" onsearch="search" placeholder="search"> </input>
<input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
</div>
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.input {
margin-top: 50px;
width: 60%;
placeholder-color: gray;
}
text{
width:100%;
font-size:25px;
text-align:center;
}
// xxx.js
import promptAction from '@ohos.promptAction'
export default {
search(e){
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
translate(e){
promptAction.showToast({
message: e.value,
duration: 3000,
});
}
}
设置输入提示
通过对input组件添加showError方法来提示输入的错误原因。
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change">
</input>
<input class="button" type="button" value="Submit" onclick="buttonClick"></input>
</div>
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.input {
width: 80%;
placeholder-color: gray;
}
.button {
width: 30%;
margin-top: 50px;
}
// xxx.js
import promptAction from '@ohos.promptAction'
export default {
data:{
value:'',
},
change(e){
this.value = e.value;
promptAction.showToast({
message: "value: " + this.value,
duration: 3000,
});
},
buttonClick(e){
if(this.value.length > 6){
this.$element("input").showError({
error: 'Up to 6 characters are allowed.'
});
}else if(this.value.length == 0){
this.$element("input").showError({
error:this.value + 'This field cannot be left empty.'
});
}else{
promptAction.showToast({
message: "success "
});
}
},
}
说明
该方法在input类型为text、email、date、time、number和password时生效。
场景示例
根据场景选择不同类型的input输入框，完成信息录入。
<!-- xxx.hml -->
<div class="container">
<div class="label-item">
<label>memorandum</label>
</div>
<div class="label-item">
<label class="lab" target="input1">content:</label>
<input class="flex" id="input1" placeholder="Enter content" />
</div>
<div class="label-item">
<label class="lab" target="input3">date:</label>
<input class="flex" id="input3" type="date" placeholder="Enter data" />
</div>
<div class="label-item">
<label class="lab" target="input4">time:</label>
<input class="flex" id="input4" type="time" placeholder="Enter time" />
</div>
<div class="label-item">
<label class="lab" target="checkbox1">Complete:</label>
<input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />
</div>
<div class="label-item">
<input class="flex" type="button" id="button" value="save" onclick="btnclick"/>
</div>
</div>
/* xxx.css */
.container {
flex-direction: column;
background-color: #F1F3F5;
}
.label-item {
align-items: center;
border-bottom-width: 1px;border-color: #dddddd;
}
.lab {
width: 400px;}
label {
padding: 30px;
font-size: 30px;
width: 320px;
font-family: serif;
color: #9370d8;
font-weight: bold;
}
.flex {
flex: 1;
}
.textareaPadding {
padding-left: 100px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
},
onInit() {
},
btnclick(e) {
promptAction.showToast({
message:'Saved successfully!'
})
}
} 
标签
已于2023-3-27 17:05:14修改
赞
收藏
回复
相关推荐
