Form components

Form Components introductions

component	Introductions	Minimum version
button	Button.	1.0.0
checkbox-group	Multiple selector, internally composed of multiplecheckbox.	1.0.0
checkbox	Multi-select items.	1.0.0
form	Form. That the user inside the component entersswitch input checkbox slider radio picker Submit.When you click form In the form form-type for submit of button Component, the value Value, you need to add the name To act as key。	1.0.0
input	Input box.	1.0.0
label	Used to improve the usability of form components.Use the for attribute to find the corresponding id, or place the control under the label, which triggers the corresponding control when clicked. For takes precedence over internal controls, and the first control triggers by default when there are multiple controls inside. The controls you can bind to are:button, checkbox, radio, switch。	1.0.0
picker	A rolling selector that pops up from the bottom.	1.0.0
picker-view	Embed the page's scroll selector. Which can only be placed picker-view-column Other nodes are not displayed.	1.0.0
picker-view-column	Scroll the selector subitems. Only can be placed on picker-viewThe height of its child nodes is automatically set to the same height as that of the child node in the picker-view is the same height as the checkbox	1.0.0
radio-group	Single selector, internally composed of multiple radio Composition.	1.0.0
radio	Radio item.	1.0.0
slider	Slide the selectors.	1.0.0
switch	Switch selector.	1.0.0
textarea	Multiline input box.	1.0.0
editor	Rich text editor	2.5.2
keyboard-accessory	Set up input / textarea Focus above the keyboard cover-view / cover-image Toolbar view	2.11.6

button

attribute	type	Default value	Required	Introductions	Minimum version
size	string	default	no	Button size	1.0.0
type	string	default	no	Style type of on	1.0.0
plain	boolean	false	no	Whether the on is hollow, the background color is transparent	1.0.0
disabled	boolean	false	no	Is it disabled?	1.0.0
loading	boolean	false	no	Does the name come with loading icon	1.0.0
form-type	string		no	Used for form Component, click separately to trigger form Component submit/reset event	1.0.0
open-type	string		no	Phiz open ability	2.12.11
hover-class	string	button-hover	no	Specifies the style class for which the on is pressed. when hover-class="none" There is no click state effect	2.11.4
hover-stop-propagation	boolean	false	no	Specifies whether to prevent this node's ancestor from clicking	2.11.4
hover-start-time	number	20	no	How long does it take to click, in milliseconds?	2.11.4
hover-stay-time	number	70	no	Click hold time after finger release, in milliseconds	2.11.4
lang	string	en	no	Specifies the language in which user information is returned, zh_CN Simplified Chinese, en_TW Traditional Chinese, en English.	Not supported
session-from	string		no	Session source, open type = "contact"	2.12.11
send-message-title	string	Current title	no	In-session message card title, valid when opentype = "contact"	2.12.11
send-message-path	Current sharing path	default	no	The in-session message card is valid when it clicks the jump phizclip path, open-type = "contact"	2.12.11
send-message-img	string	screenshot	no	Picture of in-session message card, valid when opentype = "contact"	2.12.11
app-parameter	string		no	open APP When, to APP The parameter passed is valid when open-type = launchApp	2.12.11
show-message-card	boolean	false	no	Whether to display an in-session message card, set this parameter to True, users entering the customer service session will display "may want to send phizclip" prompt in the lower right corner, users can click on the phizclip can quickly send a message, open type = "contact" valid	2.12.11
bindgetuserinfo	eventhandle		no	When the user clicks the on, the user information will be returned.[pz.getUserInfo]((pz.getUserInfo) returns consistent, open-type."getUserInfo" is valid	2.12.11
bindcontact	eventhandle		no	Customer service message callback, valid when opentype = "contact"	Not supported
bindgetphonenumber	eventhandle		no	Gets the user's phone number callback, valid when open-type = getPhoneNumber	2.12.11
binderror	eventhandle		no	A bad callback occurs when using open capabilities. Valid when open-type = launchApp	2.12.11
bindopensetting	eventhandle		no	Callback after opening the authorization settings page, open type = openSetting	2.12.11
bindlaunchapp	eventhandle		no	open APP Successful callback, open type = launchApp	2.12.11
bindchooseavatar	eventhandle		no	open APP Successful callback, open type = launchApp	2.12.11

size Legal value

Value	Introductions	Minimum version
default	Default Size
mini	Small size

type Legal value

Value	Introductions	Minimum version
primary	green
default	white
warn	red

form-type Legal value

Value	Introductions	Minimum version
submit	Submit form
reset	Reset Form

form-type Legal value

Value	Introductions	Minimum version
contact	Open the customer service session	2.12.11
share	Trigger the user to forward	2.12.11
getPhoneNumber	Get the user's phone number, which can be obtained from the bind get phone number callback,explicit explanation	2.12.11
getUserInfo	Get user information, which you can get from the bind get userinfo callback	2.12.11
launchApp	Open the app, you can set the parameters to the app through the app-parameter attributeexplicit explanation	2.12.11
openSetting	Open Authorization Settings Page	2.12.11
feedback	Open the "feedback" page	2.12.11
chooseAvatar	Get the user avatar, you can get the avatar information in the bindchooseavatar callback	2.12.11

lang Legal value

Value	Introductions	Minimum version
en	English
zh_CN	Simplified Chinese
zh_TW	Traditional Chinese

checkbox

attribute	type	Default value	Required	Introductions	Minimum version
color	string	#09BB07	no	Check box color, same as css color	1.0.0
value	string		no	checkbox, triggered when selectedcheckbox-group) change Event and carry checkbox of value	2.11.4
disabled	boolean	false	no	Is it disabled?	2.11.4
checked	boolean	false	no	Is currently selected, can be used to set the default selection	2.11.4

checkbox-group

attribute	type	Default value	Required	Introductions	Minimum version
bindchange	EventHandle		no	Triggers when a check item changes in checkbox-group change Event, detail = {value:[Array of values for the selected checkbox]}	2.11.4

editor

attribute	type	Default value	Required	Introductions	Minimum version
read-only	boolean	false	no	Set the editor to read-only	2.7.0
placeholder	string		no	Prompt information	2.7.0
show-img-size	boolean	false	no	Prompt information	2.7.0
show-img-toolbar	boolean	false	no	Display toolbar controls when clicking a picture	2.7.0
show-img-resize	boolean	false	no	Click on the picture to show the change size control	2.7.0
bindready	eventhandle		no	Triggered when editor initialization is complete	2.7.0
bindfocus	eventhandle		no	Triggered when the editor is focused, event.detail = {html, text, delta}	2.7.0
bindblur	eventhandle		no	Triggered when the editor loses focus, event.detail = {html, text, delta}	2.7.0
bindinput	eventhandle		no	Triggered when editor content changes, detail = {html, text, delta}	2.7.0
bindstatuschange	eventhandle		no	adopt Context Method to change a style in the editor, returning a style already set for the selection	2.7.0

form

attribute	type	Default value	Required	Introductions	Minimum version
report-submit	boolean	false	no	Whether to return formId For sendingTemplate message	1.0.0
bindsubmit	eventhandle		no	carry form Data triggering in submit Event, event.detail = {value : {'name': 'value'} , formId: ''}	1.0.0
bindreset	eventhandle		no	Triggered when the form is reset reset event	1.0.0
report-submit-timeout	number	0	no	Wait a period of time (milliseconds) to confirm formId Whether to take effect. If this parameter is not specified, formId There is a small probability that it will be invalid (as in the case of a network failure). Specifying this parameter will allow you to detect formId The time of this parameter is used as the timeout for this test. If it fails, returns requestFormId:fail Initial formId	Not supported

label

attribute	type	Default value	Required	Introductions	Minimum version
for	string		no	Binding control id	1.0.0

picker

attribute	type	Default value	Required	Introductions	Minimum version
mode	string	selector	no	Selector type	1.0.0
disabled	boolean	false	no	Is it disabled?	1.0.0
confirm-color	string	#586c94	no	Confirm button text color	1.0.0
cancel-color	string	#586c94	no	Cancel button text color	1.0.0
bindcancel	eventhandle		no	Selector Title, available for Android only
header-text	string		no	Selector Title, available for Android only	Not supported

mode Legal value

Value	Introductions	Minimum version
selector	Common selector
multiSelector	Multi-column selector
time	Time selector
date	Date picker
region	Provincial urban selector

In addition to the general properties mentioned above, picker have different properties for different mode.

Multiple column selector: mode = multiSelector

attribute	type	Default value	Required	Introductions	Minimum version
range	array/object array	[]	no	mode for selector or multiSelector Range effective
range-key	string		no	when range It's a... Object Array When the range-key To specify Object in key Displays content as a selector
value	array	[]	no	Indicate that you have chosen range Whose subscript is derived from the 0 Start.)
bindchange	eventhandle		no	value Triggered when changed change Event, event.detail = {value}
bindcolumnchange	eventhandle		no	Triggered when the column changes

Multiple column selector: mode = time

attribute	type	Default value	Required	Introductions	Minimum version
value	string		no	Indicates the selected time in the format "hh: mm"
start	string		no	Indicates the selected time in the format "hh: mm"
end	string		no	Represents the end of a valid time range, with the string format "hh: mm"
bindchange	eventhandle		no	value Triggered when changed change Event, event.detail = {value}

Multiple column selector: mode = date

attribute	type	Default value	Required	Introductions	Minimum version
value	string	Same day	no	Represents the selected date in the format "YYYY-MM-DD"
start	string		no	Represents the start of a valid date range, with a string format of "YYY-YM-MD-DD"
end	string		no	Represents the end of a valid date range in the string format "YYY-MM-DD"
fields	string	day	no	Valid value Year, month, day, represents the granularity of the selector
bindchange	eventhandle		no	Valid value Year, month, day, represents the granularity of the selector

fields Valid value:*

Value	Introductions	Minimum version
year	Selector granularity is year
month	Selector granularity is month
day	Selector granularity is day

Multiple column selector: mode = region

attribute	type	Default value	Required	Introductions	Minimum version
value	array	[]	no	Represents the selected province, with the first value in each column selected by default
custom-item	string		no		You can add a custom item to the top of each column
level	string		no	region	Selector Hierarchy
bindchange	eventhandle		no	value Triggered when changed change Event, event.detail = {value, code, postcode}, where the fields code Is a statistical zoning code, postcode It's a zip code.

picker-view

attribute	type	Default value	Required	Introductions	Minimum version
value	Array		no	The numbers in the array are represented sequentially picker-view Inner picker-view-column Selected items (subscript from 0 Start), the number is greater than picker-view-column Optional length, select the last item.	1.0.0
indicator-style	string		no	Set the style of the checkbox in the middle of the selector	1.0.0
indicator-class	string		no	Set the class name of the middle checkbox in the selector	2.11.4
immediate-change	boolean	false	no	If or not trigger the change event immediately when the finger is released. If not on, the change event will be triggered after the scrolling animation ends.	Not supported
mask-style	string		no	Set the style of the mask	2.11.4
mask-class	string		no	Set the class name of the mask	2.11.4
bindchange	eventhandle		no	Triggers the change event when scrolling the selection, event.detail = {value}. Value is an array representing picker-view Inner picker-view-column Which item is currently selected (subscript from 0 Start.)	2.11.4
bindpickstart	eventhandle		no	Trigger event when scroll selection starts	2.11.4
bindpickend	eventhandle		no	Trigger event when scroll selection ends	2.11.4

picker-view-column

Scroll selector subitem. It can only be placed in the picker-view, and the height of the child node is automatically set to the height of the selected box in the picker-view

radio

attribute	type	Default value	Required	Introductions	Minimum version
color	string	#09BB07	no	Color of radio, same as color of css	1.0.0
value	string		no	radio Identification. Whenradio When selected,radio-group of change Events will carryradio value	2.11.4
checked	boolean	false	no	Currently selected	2.11.4
disabled	boolean	false	no	Is it disabled?	2.11.4

radio-group

attribute	type	Default value	Required	Introductions	Minimum version
bindchange	EventHandle		no	Triggered when the selected item in radio-group changes change Event, detail = {value:[Array of values for selected radio]}	2.11.4

slider

attribute	type	Default value	Required	Introductions	Minimum version
min	number	0	no	least value	1.0.0
max	number	100	no	Maximum value	1.0.0
step	number	1	no	Step size must be greater than 0 and can be(Max - Min) integer	1.0.0
disabled	boolean	false	no	Is it disabled?	1.0.0
value	number	0	no	Current value	1.0.0
color	color	#e9e9e9	no	Color of the background bar use the backgroundColor）	1.0.0
selected-color	color	#1aad19	no	Selected color (use the activeColor）	1.0.0
show-value	boolean	false	no	Displays current value	1.0.0
bindchange	eventhandle		no	Event triggered after completing a drag, event.detail = {value}	1.0.0
activeColor	color	#1aad19	no	Selected color	2.11.4
backgroundColor	color	#e9e9e9	no	Background Bar Color	2.11.4
block-size	number	28	no	The size of the slider in the range 12 - 28	2.11.4
block-color	color	#ffffff	no	Slider color	2.11.4
bindchanging	eventhandle		no	Event triggered during drag, event.detail = {value}	2.11.4

switch

attribute	type	Default value	Required	Introductions	Minimum version
checked	boolean	false	no	If selecteds	1.0.0
disabled	boolean	false	no	Is it disabled?	1.0.0
type	string	switch	no	Style, valid value: switch, checkbox	1.0.0
color	string	#04BE02	no	switch The color of css of color	1.0.0
bindchange	eventhandle		no	checked Triggered when changed change Events, event.detail = {value}	1.0.0

input

attribute	type	Default value	Required	Introductions	Minimum version
value	string		yes	The initial content of the input box	2.11.4
type	string	text	no	input Type	2.11.4
password	boolean	false	no	Is it a password type?	2.11.4
placeholder	string		yes	Placeholder when input box is empty	2.11.4
placeholder-style	string		yes	Designation placeholder Style	2.11.4
placeholder-class	string	input-placeholder	no	Designation placeholder Style class	2.11.4
disabled	boolean	false	no	Is it disabled?	2.11.4
maxlength	number	140	no	Maximum input length, set to -1 Does not limit the maximum length	2.11.4
cursor-spacing	number	0	no	Specifies the distance between the cursor and the keyboard input The distance from the bottom and cursor-spacing The minimum distance specified as the distance between the cursor and the keyboard
auto-focus	boolean	false	no	(Soon to be abandoned, please use directly focus ) Auto focus, pull up the keyboard
focus	boolean	false	no	Getting focus
confirm-type	string	done	no	Sets the text of the on in the lower right corner of the keyboard, which takes effect only when type = 'text'
cursor	number		yes	Specifies the cursor position when focusing
confirm-hold	boolean	false	no	Click on the on in the lower right corner of the keyboard to keep the keyboard is not folded
selection-start	number	-1	no	Cursor starting position, valid for auto-aggregation, with selection-end
selection-end	number	-1	no	End of cursor position, valid for auto-aggregation, with selection-start
adjust-position	boolean	true	no	Does the page automatically push up when the keyboard bounces up
bindinput	eventhandle		yes	Triggered when keyboard input, event.detail = {value, cursor, keyCode},keyCode Is the key value, 2.1.0 The handler function can directly return A string that replaces the contents of the input box.
bindfocus	eventhandle		yes	Triggered when input box is focused, event.detail = { value, height },height For keyboard height, in the base library 1.9.90 Rise support
bindblur	eventhandle		yes	Triggered when the input box loses focus, event.detail = { value, encryptedValue, encryptError }
bindconfirm	eventhandle		yes	Triggered when the Finish on is clicked, event.detail = { value }
bindkeyboardheightchange	eventhandle		yes	This event is triggered when the keyboard height changes, event.detail = {height: height, duration: duration}
always-embed	boolean	false	no	force input In the same tier state, default focus time input It cuts to the non-state. (Only in iOS Entry into force below)	Not supported
hold-keyboard	boolean	false	no	Does not close the keyboard when you click on the page
safe-password-cert-path	string		no	Secure keyboard encryption public key path, only support intra-package path	Not supported
safe-password-length	number		no	Safe keyboard input password length	Not supported
safe-password-time-stamp	number		no	Not supported	Not supported
safe-password-nonce	string		no	Not supported	Not supported
safe-password-salt	string		no	The security keyboard calculates the hash salt value, if custom-hash is specified Is invalid	Not supported
safe-password-custom-hash	string		no	The security keyboard evaluates hash algorithmic expressions, such as md5(sha1('foo' + sha256(sm3(password + 'bar'))))`	Not supported

type Legal value

value	Introductions	Minimum version
text	Text input keyboard
number	Digital input keyboard
idcard	ID input keyboard
digit	Numeric keypad with decimal point

Numeric keypad with decimal point

value	Introductions	Minimum version
send	The bottom right on is "send."
search	The bottom right on is "Search."
next	The bottom right on is "Next."
go	The on in the lower right corner is "Go."
done	The bottom right on is "Done"

textarea

attribute	type	Default value	Required	Introductions	Minimum version
value	string		no	Enter the contents of the box
placeholder	string		no	Placeholder when input box is empty
placeholder-style	string		no	Designation placeholder Currently supports only color, font-size, and font-weight
placeholder-class	string	textarea-placeholder	no	Designation placeholder Style class
disabled	boolean	false	no	Designation placeholder Style class
maxlength	number	140	no	Maximum input length, set to -1 Does not limit the maximum length
auto-focus	boolean	false	no	Autofocus, pull up the keyboard.
focus	boolean	false	no	Autofocus, pull up the keyboard.
auto-height	boolean	false	no	Autofocus, pull up the keyboard.
fixed	boolean	false	no	if textarea It was in a place position:fixed The specified property needs to be displayed fixed for true
cursor-spacing	number	0	no	Specifies the distance between the cursor and the keyboard. taketextareaThe distance from the bottom andcursor-spacingThe minimum distance specified as the distance between the cursor and the keyboard
cursor	number	-1	no	Specifies the cursor position when focusing
show-confirm-bar	boolean	true	no	Display the bar above the keyboard with the "Finish" on
selection-start	number	-1	no	Cursor starting position, valid for automatic aggregation, with theselection-endCollocation use
selection-end	number	-1	no	Cursor end position, valid for automatic aggregation, with theselection-startCollocation use
adjust-position	boolean	true	no	Does the page automatically push up when the keyboard bounces up
hold-keyboard	boolean	false	no	Does not close the keyboard when you click on the page
disable-default-padding	boolean	false	no	Does not close the keyboard when you click on the page
bindfocus	eventhandle		no	Triggered when input box is focused, event.detail = { value, height },height For keyboard height, in the base library 1.9.90 Rise support
bindblur	eventhandle		no	Triggered when the input box loses focus, event.detail = {value, cursor}
bindlinechange	eventhandle		no	Called when the number of lines in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	eventhandle		no	When keyboard input, triggers input Event, event.detail = {value, cursor, keyCode},keyCode Is a key value and currently the tool does not support returning keyCode parameters.bindinput The return value of the handler is not reflected in the textarea on
bindconfirm	eventhandle		no	When the click is complete, trigger confirm Event, event.detail = {value: value}
bindkeyboardheightchange	eventhandle		no	This event is triggered when the keyboard height changes, event.detail = {height: height, duration: duration}

keyboard-accessory

tip: The maximum height of the view is 200px

Sample code

<textarea hold-keyboard="{{true}}">
  <keyboard-accessory class="container" style="height: 50px;">
    <cover-view bindtap="tap" style="flex: 1; background: green;">1</cover-view>
    <cover-view bindtap="tap" style="flex: 1; background: red;">2</cover-view>
  </keyboard-accessory>
</textarea>