A NoticeBar component displays a group of notifications on the current page. It is quite eye-catching.
Property
Property | Type | Required | Default value | Description |
mode | 'link' | 'closeable' | No | - | The notification type. 'link' indicates that each row of notifications is clickable. 'closeable' indicates that you can tap x to close notifications. If this property is not set, there is no icon on the right. |
actions | string[] | No | - | The action. At most two actions can be set. When the actions property exists, the mode property does not take effect. |
showIcon | boolean | No | false | Whether to display the icon on the left. |
enableMarquee | boolean | No | false | Whether to enable a scroll animation. |
loop | boolean | No | false | Whether to loop the scroll animation. This property takes effect when enableMarquee is set to true. |
type | 'default' | 'info' | 'error' | 'primary' | No | 'default' | The notification type. Valid values include 'default': orange; 'info': gray: 'error': red; 'primary': blue. |
className | string | No | - | The class name. |
Event
Event name | Description | Type |
onTap | Callback fired when the icon (arrow or x) on the right of the notice bar is tapped. |
|
onActionTap | Callback fired when the text on the action area on the right is tapped. |
|
Style class
Class name | Description |
amd-notice-bar | The style of the entire notice bar. |
amd-notice-bar-default | The style of the entire notice bar. |
amd-notice-bar-danger | The style of the entire notice bar. |
amd-notice-bar-primary | The style of the entire notice bar. |
amd-notice-bar-transparent | The style of the entire notice bar. |
amd-notice-bar-content | The style of the internal area. |
amd-notice-bar-scroll-left | The style of the shadow gradient on the left. |
amd-notice-bar-scroll-right | The style of the shadow gradient on the right. |
amd-notice-bar-marquee | The style of the text display area. |
amd-notice-bar-operation | The style of the operation area on the right. |
amd-notice-bar-operation-icon | The style of the icon on the right action area. |
amd-notice-bar-operation-text | The text style of the operation area on the right. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view>
<demo-block title="Notice bar Semantics " padding="0">
<notice
type="default"
showIcon>
default
</notice>
<white-space/>
<notice
type="error"
showIcon>
error
</notice>
<white-space/>
<notice
type="info"
showIcon>
info
</notice>
<white-space/>
<notice
type="primary"
showIcon>
primary
</notice>
</demo-block>
<demo-block title="Closeable" padding="0">
<notice
showIcon
onTap="handleClose"
mode="closeable">
This notification can be turned off
</notice>
</demo-block>
<demo-block title="extra long scrolling" padding="0">
<block a:for="{{typeList}}">
<notice
type="{{item}}"
showIcon="{{true}}"
enableMarquee="{{true}}"
loop="{{true}}"
onTap="handleTapLink"
mode="link">
Turn on circular scrolling when the text overflows. If the text is not enough, continue to add text to make up the number.
</notice>
<white-space/>
</block>
</demo-block>
<demo-block title="Custom" padding="0">
<notice
showIcon
actions="{{actionsText2}}"
mode="link"
onTap="handleTapLink"
onActionTap="handleTapAction">
Custom right button
</notice>
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
actionsText2: ['No more prompt', 'see details'],
typeList: ['default', 'error', 'info', 'primary'],
},
handleTapAction(e) {
my.alert({
title: `The element ${e} in actions is currently clicked. `,
});
},
handleTapLink() {
my.alert({
title: 'link type was clicked ',
});
},
handleClose() {
my.alert({
title: 'click to close',
});
},
});The following shows an example of the code in the index.json file:
{
"defaultTitle": "Notice",
"usingComponents": {
"notice": "antd-mini/es/NoticeBar/index",
"white-space": "../../components/WhiteSpace/index",
"demo-block": "../../components/DemoBlock/index"
}
}