MobileButton

Overview

The MobileButton component allows the user to create and displays buttons.

---

Specification

Property

Here is a list of properties that can be used for modifying the component:

Name	Type	Default	Description	Remark
className	string	""	Component class name
id	string	""	Component id name
text	string	""	Text to be displayed in buttons	If content is unspecified, the value of text will be displayed In other cases, the text will be ignored
type	string	"normal"	Button design type	Available options: "normal" : White (#ffffff) "submit" : Blue (#206694)
content *1	string/HTMLElement	""	The DOM inside button	If a string with HTML is set, it will be automatically converted to HTML and displayed as it is
disabled	boolean	false	Enable/Disable the component
visible	boolean	true	Show/Hide the component

caution

*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

Event

Here is a list of events that can be specified:

Name	Type	Description	Remark
click	function	Event handler when Clicked	It will pass the event object as the argument

Constructor

MobileButton(options)
Here is a list of available constructors:

Parameter

Name	Type	Default	Description	Remark
options	object	{}	Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name	Description
--kuc-mobile-button-background-color
--kuc-mobile-button-background-color-active
--kuc-mobile-button-background-color-focus	This property won't take effect in Safari because the clicked buttons don't get focus. Please read this clicking and focus article for more information!
--kuc-mobile-button-font-size
--kuc-mobile-button-height
--kuc-mobile-button-text-color
--kuc-mobile-button-width

---

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const header = kintone.mobile.app.getHeaderMenuSpaceElement();

const mobileButton = new Kuc.MobileButton({
  text: 'Submit',
  type: 'submit',
  content: `<div>
              <svg>...</svg>
              <span>Search</span>
            </div>;`,
  className: 'options-class',
  id: 'options-id',
  visible: true,
  disabled: false
});
header.appendChild(mobileButton);

mobileButton.addEventListener('click', event => {
  console.log(event);
});

---

Related Articles

• Mobile timecard customization