Title
You can use the title component to display the title of each page.
Sample code
See the sample codes in different languages:
.json
copy
{
"defaultTitle": "title",
"usingComponents": {
"title": "mini-ali-ui/es/title/index"
}
.axml
copy
<title
hasLine="true"
type="more"
onActionTap="titleMore"
>Title without icon</title>
<title
hasLine="true"
iconURL="https://example.com/images/T1HHFgXXVeXXXXXXXX.png"
type="close"
onActionTap="titleClose"
>Title with a close action</title>
<title
hasLine="true"
className="changeColor"
iconURL="https://example.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original"
type="arrow"
onActionTap="titleGo"
>Modify the style by class</title>
.acss
copy
.changeColor {
font-size: 30px;
color: #f32600;
}
.js
copy
Page({
data: {},
onLoad() {},
titleGo() {
my.showToast({
content: 'click the arrow to jump',
});
},
titleMore() {
my.showToast({
content: 'click the more to display bubble menu',
});
},
titleClose() {
my.showToast({
content: 'click the close to close',
});
},
});
Parameters
Property | Type | Description |
className | String | Customized class. |
hasLine | Boolean | An indicator of whether a line is required under the title. The default value is |
iconURL | String | URL of the icon next to title name. The icon is displayed as a square image by default. |
type | String | Type of the icon that users can tap. Valid values are:
This property is null by default. When the property is null, onActionTap is invalid. |
onActionTap | EventHandle | The event that is triggered when users tap the icon on the right of title. The default value is |