Skip to main content

Components

View Containers#

View#

PropertyTypeDefault ValueRequiredDescription
hoverClassStringnoneThe style class the view that is tapped. When hoverClass="none", the tap state is not displayed.
hoverStopPropagationBooleanfalseSpecifies whether to block the tapped state from the ancestor node of this node.
hoverStartTimeNumber50Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTimeNumber400Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
onClickEvent handlerA click event triggered.
onLongPressEvent handlerThe finger leaves the screen after it taps and holds on the screen for more than 350 ms. If an event callback function is specified and this event is triggered, the click event is not triggered.

CoverView#

Text view above native components.

Only cover-view and cover-image can be nested.

CoverImage#

Image view above native components. Native components that can be covered are the same as those in cover-view. It can be nested into cover-view.

PropertyTypeDefault ValueRequiredDescription
srcStringThe path of the icon. Temporary paths and network addresses are supported. Base64 encoded strings are not supported.
onLoadEvent handlerTriggered when an image is loaded.
onErrorEvent handlerTriggered when image loading failed.

ScrollView#

PropertyTypeDefault ValueRequiredDescription
scrollXBooleanfalseNoSupports horizontal scrolling.
scrollYBooleanfalseNoSupports vertical scrolling.
scrollTopNumber, StringNoSpecifies the location of the vertical scroll bar.
scrollLeftNumber, StringNoSpecifies the location of the horizontal scroll bar.
scrollIntoViewStringNoSpecifies the direction to which the scroll bar can be moved. Its value should be the ID of a child element (the ID cannot begin with a number), and this child element is scrolled in the direction specified in this property.
onScrollToUpperEvent handlerNoTriggered when the scroll bar is moved to the top or left side. event.detail = { direction }
onScrollToLowerEvent handlerNoTriggered when the scroll bar is moved to the bottom or right side. event.detail = { direction }
onScrollEvent handlerNoTriggered when the scroll bar is moving. event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
upperThresholdNumber, String50NoSpecifies the distance from the top/left of the page when a scrolltoupper event is triggered.
lowerThresholdNumber, String50NoSpecifies the distance from the bottom/right of the page when a scrolltoupper event is triggered.
fastDecelerationbooleanfalseuse fast rate of deceleration after the user lifts their finger. (only work with enhanced: true and only work on iOS)
enhancedbooleanfalseenhance scrollView to use ScrollViewContext

Basic Components#

Icon#

PropertyTypeDefault ValueRequiredDescription
typeStringYesThe type of the icon.
sizeString1emThe size of the icon
colorStringThe color of the icon. It is the same as the color of the css.
type Type =  | 'circle'  | 'download'  | 'info'  | 'safe-success'  | 'safe-warn'  | 'success'  | 'success-circle'  | 'success-no-circle'  | 'waiting'  | 'waiting-circle'  | 'warn'  | 'info-circle'  | 'cancel'  | 'search'  | 'clear'  | 'back'  | 'delete'  | 'success-no-circle-thin'  | 'arrow'  | 'arrow-bold'  | 'back-arrow'  | 'back-arrow-thin'  | 'close'  | 'close-thin'  | 'back-circle'

BMP use base64 (background-image: url(data:image/svg+xml,..);) internally.

RichText#

PropertyTypeDefault ValueRequiredDescription
nodesArray, String[]The node list/HTML string.
spaceStringDisplays consecutive spaces.

nodes#

Currently, two nodes are supported, which are distinguished according to the type: element node and text node. It is the element node by default. HTML nodes are displayed in the rich text area.

Element node: type = node#
PropertyDescriptionTypeRequiredRemarks
nameTag nameStringYesSupports some trusted HTML nodes.
attrsPropertyObjectSupports some trusted properties. The name complies with the Pascal naming convention.
childrenChild node listArrayThe structure of child nodes is the same as that of nodes.
Text node: type = text#
PropertyDescriptionTypeRequiredRemarks
textTextStringYesSupports entities.

Trusted HTML Nodes and Properties#

The class and style(rpx is supported) properties are supported globally. The id property is not supported.

NodeProperty
a
abbr
address
article
aside
b
bdi
bdodir
big
blockquote
br
caption
center
cite
code
colspan, and width
colgroupspan, and width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
imgalt, src, height, and width
ins
label
legend
li
mark
nav
olstart and type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
tablewidth
tbody
tdcolspan, height, rowspan, and width
tfoot
thcolspan, height, rowspan, and width
thead
trcolspan, height, rowspan, and width
tt
u
ul

Bug & Tip#

  • tip: String is not recommended for nodes, because the performance may deteriorate.
  • tip: The rich-text component blocks events of all nodes.
  • tip: The attrs property does not support the id property, but supports the class property.
  • tip: The name property is case-insensitive.
  • tip: If an untrusted HTML node is used, this node and all of its child nodes will be removed.
  • tip: The img tag supports network images only.

Text#

PropertyTypeDefault ValueRequiredDescription
userSelectBooleanfalseSpecifies whether the text is selectable.

Form Components#

Button#

PropertyTypeDefault ValueRequiredDescription
sizeStringdefaultThe size of the button.
typeStringdefaultThe style class of the button.
plainBooleanfalseSpecifies whether the button is hollow with transparent background.
disabledBooleanfalseSpecifies whether to disable the component.
loadingBooleanfalseSpecifies whether a loading icon exists before the name.
hoverClassStringbutton-hoverThe style class the button that is tapped. When hoverClass="none", the tap state is not displayed.
hoverStopPropagationBooleanfalseSpecifies whether to block the tapped state from the ancestor node of this node.
hoverStartTimeNumber20Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTimeNumber70Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.

Valid values of size#

ValueDescription
defaultDefault size.
miniMinimum size.

Checkbox#

PropertyTypeDefault ValueRequiredDescription
valueStringThe ID of the checkbox component. When it is selected, a checkbox-group change event is triggered, carrying the value of checkbox.
disabledBooleanfalseSpecifies whether to disable the component.
checkedBooleanfalseSpecifies whether to select the checkbox by default.
ColorString#F0B90BThe color of the checkbox. It is the same as the color of the css.
onChangeEvent handlerA change event triggered when checked changes. event.detail = {value}.

CheckboxGroup#

PropertyTypeDefault ValueRequiredDescription
onChangeEvent handlerA change event triggered when selected options in checkbox-group change. `detail = {value: value

Form#

PropertyTypeDefault ValueRequiredDescription
onSubmitEvent handlerTriggers a submit event that carries the form data. event.detail = {value : {'name': 'value'} , formId: ''}

Input#

PropertyTypeDefault ValueRequiredDescription
valueString, NumberThe initial content in the input box.
typeStringtextThe type of input.
passwordBooleanfalseSpecifies whether the input is password-type content.
placeholderStringThe placeholder used when the input box is empty.
placeholderStyleStringSpecifies the style of the placeholder.
placeholderClassStringinput-placeholderSpecifies the style class of the placeholder.
disabledBooleanfalseSpecifies whether to disable the component.
maxlengthNumber140The maximum length. When it is set to -1, the maximum length is not limited.
cursorSpacingNumber0Specifies the distance between the cursor and the keyboard. It is either the distance between the input box and the bottom of the screen or the distance specified via cursorSpacing, whichever is smaller..
autoFocusBooleanfalse(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focusBooleanfalseGets focus.
confirmTypeStringdoneSets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHoldBooleanfalseSpecifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
cursorNumberSpecifies the cursor position during focusing.
selectionStartNumber-1The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEndNumber-1The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPositionBooleantrueSpecifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboardBooleanfalseSpecifies whether to hide the keyboard when clicking page while the input is focused.
onInputEvent handlerTriggered when the user taps the keyboard. event.detail = { value, cursor, keyCode }, where keyCode is the key value.box.
onFocusEvent handlerTriggered when the input box is focused. event.detail = { value, height }, where height is the height of the keyboard.
onBlurEvent handlerTriggered when the input box is unfocused. event.detail = { value }.
onConfirmEvent handlerTriggered when the Done button is tapped. event.detail = { value }.
onKeyboardHeightChangeEvent handlerTriggered when the height of the keyboard changes. event.detail = { height, duration}.

Valid values of type#

ValueDescription
textKeyboard for text input.
numberKeyboard for number input.

Valid values of confirm-type#

ValueDescription
sendIndicates that the button in the lower right corner is Send.
searchIndicates that the button in the lower right corner is Search.
nextIndicates that the button in the lower right corner is Next.
goIndicates that the button in the lower right corner is GO.
doneIndicates that the button in the lower right corner is Done.

Textarea#

PropertyTypeDefault ValueRequiredDescription
valueStringThe initial content in the input box.
placeholderStringThe placeholder used when the input box is empty.
placeholderStyleStringSpecifies the style of the placeholder. Only color, font-size, and font-weight styles are supported.
placeholderClassStringtextarea-placeholderSpecifies the style class of the placeholder.
disabledBooleanfalseSpecifies whether to disable the component.
maxlengthNumber140The maximum length. When it is set to -1, the maximum length is not limited.
autoFocusBooleanfalse(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focusBooleanfalseGets focus.
autoHeightBooleanfalseSpecifies whether the height automatically increases. If this property is specified, style.height does not take effect.
fixedBooleanfalseIf the textarea is in an area of position:fixed, the value of the specified property should always be true.
cursorSpacingNumber0Specifies the distance between the cursor and the keyboard. It is either the distance between textarea and the bottom of the screen or the distance specified via cursorSpacing, whichever is smaller.
cursorNumber-1Specifies the cursor position during focusing.
showConfirmBarBooleantrueSpecifies whether to display the bar containing the Done button above the keyboard.
selectionStartNumber-1The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEndNumber-1The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPositionBooleantrueSpecifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboardBooleanfalseSpecifies whether to hide the keyboard when clicking page while the input is focused.
disableDefaultPaddingBooleanfalseSpecifies whether to remove the default padding behavior on iOS.
confirmTypeStringreturnSets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHoldBooleanfalseSpecifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
onInputEvent handlerTriggered when the user taps the keyboard. event.detail = { value, cursor, keyCode }, where keyCode is the key value.box.
onFocusEvent handlerTriggered when the input box is focused. event.detail = { value, height }
onBlurEvent handlerTriggered when the input box is unfocused. event.detail = { value, cursor }.
onLineChangeEvent handlerCalled when the number of lines in the input box changes. event.detail = { height: number, heightRpx: number, lineCount: number }
onConfirmEvent handlerTriggered when the Done button is tapped. event.detail = { value }.
onKeyboardHeightChangeEvent handlerTriggered when the height of the keyboard changes. event.detail = { height, duration}.

Valid values of confirm-type#

ValueDescription
sendIndicates that the button in the lower right corner is Send.
searchIndicates that the button in the lower right corner is Search.
nextIndicates that the button in the lower right corner is Next.
goIndicates that the button in the lower right corner is GO.
doneIndicates that the button in the lower right corner is Done.
returnIndicates that the button in the lower right corner is Return.

Label#

PropertyTypeDefault ValueRequiredDescription
forStringThe ID of the bound control.

Picker#

PropertyTypeDefault ValueRequiredDescription
modeStringselectorThe type of the picker.
disabledBooleanfalseSpecifies whether to disable the component.
onCancelEvent handlerTriggered when selection is canceled.

Valid values of mode#

ValueDescription
selectorCommon picker.
multiSelectorMulti-column picker.
timeTime picker.
dateDate picker.

In addition to the preceding general properties, picker has different properties specific to different modes.

Common picker: mode = selector#

PropertyTypeDefault ValueRequiredDescription
rangeArray[]Valid when the mode is selector or multiSelector.
range-keystringSpecifies the key value of the object as the content to be displayed on the picker when range is an object array.
valueNumber0Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChangeEvent handlerA change event is triggered when value is changed. event.detail = {value}.

Common picker: mode = multiSelector#

PropertyTypeDefault ValueRequiredDescription
rangeArray/object array[]Valid when the mode is selector or multiSelector.
range-keystringSpecifies the key value of the object as the content to be displayed on the picker when range is an object array.
valueNumber[]Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChangeEvent handlerA change event is triggered when value is changed. event.detail = {value}.
onColumnChangeEvent handlerTriggered when the column changes. event.detail = {value, column}.

Time picker: mode = time#

PropertyTypeDefault ValueRequiredDescription
valueStringThe selected time, in the form of "hh:mm".
startStringThe start of the valid time range, in the form of "hh:mm".
endStringThe end of the valid time range, in the form of "hh:mm".
onChangeEvent handlerA change event triggered when the value is changed. event.detail = {value}.

Date picker: mode = date#

PropertyTypeDefault ValueRequiredDescription
valueStringtodayThe selected date, in the form of "YYYY-MM-DD".
startStringTThe start of the valid date range, in the form of "YYYY-MM-DD".
endStringThe end of the valid date range, in the form of "YYYY-MM-DD".
fieldsStringdayThe granularity of the picker. Valid values include "year", "month", and "day".
onChangeEvent handlerAA change event triggered when the value is changed. event.detail = {value}.
Valid values of fields#
ValueDescription
yearThe granularity of the picker is year.
monthThe granularity of the picker is month.
dayThe granularity of the picker is day.

Radio#

PropertyTypeDefault ValueRequiredDescription
valueStringThe ID of the radio component. When it is selected, a radio-group change event is triggered, carrying the value of radio.
disabledBooleanfalseSpecifies whether to disable the component.
checkedBooleanfalseSpecifies whether to select the radio by default.
ColorString#F0B90BThe color of the radio. It is the same as the color of the css.
onChangeEvent handlerA change event triggered when checked changes. event.detail = {value}.

RadioGroup#

PropertyTypeDefault ValueRequiredDescription
onChangeEvent handlerA change event triggered when selected options in radio-group change. detail = {value}

Slider#

PropertyTypeDefault ValueRequiredDescription
minNumber0The minimum value.
maxNumber100The maximum value.
stepNumber1The step. Its value must be greater than 0, and can be exactly divided by (max – min).
disabledBooleanfalseSpecifies whether to disable the component.
valueNumberThe current value.
showValueBooleanfalseSpecifies whether to display the current value.
activeColorString#F0B90BThe selected color.
backgroundColorString#e9e9e9The color of the background bar.
onChangeEvent handlerThe event triggered after the swiper is dragged. event.detail = {value}.
onChangingEvent handlerThe event triggered during dragging of the swiper. event.detail = {value}.

Switch#

PropertyTypeDefault ValueRequiredDescription
checkedBooleanfalseSpecifies whether the item is selected.
disabledBooleanfalseSpecifies whether to disable the component.
ColorString#F0B90BThe color of the switch component. It is the same as the color of the css component.
onChangeEvent handlerA change event triggered when checked changes. event.detail = {value}.

Navigators#

Navigator#

PropertyTypeDefault ValueRequiredDescription
targetStringselfSpecifies the target to be redirected from. It is the current Mini Program by default.
urlStringThe redirection link in the current Mini Program.
appIdStringThe appId of the Mini Program to be opened. It is valid when target="miniProgram".
pathStringThe path of the page to be opened. It is valid when target="miniProgram". If the value is empty, the homepage is opened.
extraDataobjectThe data to be passed to the target Mini Program. It is valid when target="miniProgram". The target Mini Program can obtain this data from App.onLaunch() and App.onShow().
version'preview', 'experience', 'published'publishedThe channel of the Mini Program to be opened. It is valid when target="miniProgram".
type'app', 'web', 'webview'appThe type of the Mini Program to be opened. It is valid when target="miniProgram".
revStringThe rev of the Mini Program to be opened. It is valid when target="miniProgram".
onSuccessEvent handlerThe callback function for a successful API call.
onFailEventThe callback function for a failed API call.
onCompleteEventThe callback function used when the API call completed (always executed whether the call succeeds or fails).

BMP use mpService.navigateTo(url) internally.

Valid values of target#

ValueDescription
selfCurrent Mini Program.
miniProgramOther Mini Programs.

Usage of target='miniProgram'#

<Navigator  appId={}  path={}  extraData={}  version={}  type={}  rev={}  target="miniProgram"  onSuccess={}  onFail={}  onComplete={}>  Link</Navigator>

Media Components#

Image#

PropertyTypeDefault ValueRequiredDescription
srcStringYesThe image resource address.

If the value of src is a http resource, BMP will use mpService.downloadFile(src) to download image.

Video#

PropertyTypeDefault ValueRequiredDescription
srcStringYesThe address of the video to be played.
controlsBooleantrueNoSpecifies whether to display default playback controls (Play/Pause buttons, playback progress, and timeline).
autoplayBooleanfalseNoSpecifies whether to enable auto playback.
loopBooleanfalseNoSpecifies whether to enable loop playback.
mutedBooleanfalseNoSpecifies whether to enable muted playback.

Canvas#

Canvas#

PropertyTypeDefault ValueRequiredDescription
typestring2dNoThe type of the canvas. Only webGL is supported.
disableScrollBooleanfalseNoDisables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStartEvent handlerNoFinger touch starts.
onTouchMoveEvent handlerNoFinger moves after touch.
onTouchEndEvent handlerNoFinger touch ends.
onTouchCancelEvent handlerNoFinger touch is interrupted by call reminder, pop-up window, etc.
onLongTapEvent handlerNoTriggered when a finger taps and holds on the screen for 500 ms. After this event is triggered, moving on the screen does not trigger screen scrolling.

Example#

import mpService from '@binance/mp-service'
function Example() {  React.useEffect(() => {    mpService.nextTick(() => {      const query = mpService.createSelectorQuery()      query        .select(`.myCanvas`)        .fields({ node: true, size: true })        .exec(res => {          const canvas = res[0].node          canvas.width = res[0].node.width          canvas.height = res[0].node.height          const ctx = canvas.getContext('2d')
          ctx.fillStyle = 'green'          ctx.fillRect(20, 10, 150, 100)        })    })  }, [])
  return <Canvas className="myCanvas" />}

Canvas api#

PropertyDescription
Canvas.createImage()Creates an image object.
Canvas.createPath2D(Path2D path)Create a Path2D object.

Context api not supported#

  • measureText
  • direction
  • createConicGradient
  • drawFocusIfNeeded
  • scrollPathIntoView
  • isPointInPath
  • isPointInStroke

Open Capabilities#

WebView#

PropertyTypeDefault ValueRequiredDescription
srcStringNoThe link from the webview to a webpage.
onLoadEvent handlerNoTriggered when a webpage is loaded. e.detail = { src }
onErrorEvent handlerNoTriggered when a webpage failed to be loaded. e.detail = { src }
onMessageEvent handlerNoTriggered when a webpage send message to mini-program. e.detail = { data }

Related interface#

You can use the interface provided by WebView-SDK to send messages to the mini-program page. The supported interfaces are:

InterfaceDescription
bn.miniProgram.postMessageSend a message to the mini-program, trigger the onMessage event of the component.
bn.onMessageHandle message

Example#

In the WebView page#

Import the following WebView-SDK file on the page where the JS API needs to be called: https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.0.min.js

<script src="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.0.min.js"></script>

And it is recommended that developers put the webview-sdk file on their own CDN so that they can provide users with a uniform and controlled speed experience.

web-view page code:

<script src="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.0.min.js"></script>
<script>  // PostMessage from web page to mini-program  bn.miniProgram.postMessage({ foo: 'bar' })  // Receive messages from mini-program.  bn.onMessage = function(e) {    console.log(e) // { data: 'baz' }  }</script>

Note: Support for using AMD/CMD

In the mini-program page#
import * as React from 'react'import { WebView } from '@binance/mp-components'import mpService from '@binance/mp-service'
function Page() {  return (    <WebView      className="web-view"      src="https://www.binance.com/en/js-sdk-demo-ui/webview"      onLoad={e => console.log('[WebView] onLoad', e.detail)}      onError={e => console.log('[WebView] onError', e.detail)}      // handle message from webview      onMessage={async e => {        await mpService.showModal({          title: 'Message From WebView',          content: JSON.stringify(e.detail.data),        })
        // get webview context by querySelector API        mpService          .createSelectorQuery()          .select('.web-view')          .context(result => {            // post message            result.context.postMessage('baz')          })          .exec()      }} // renderer --> worker      //    />  )}
export default Page