Skip to main content
Version: 1.16.0

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:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
textstring""Text to be displayed in buttonsIf content is unspecified, the value of text will be displayed
In other cases, the text will be ignored
typestring"normal"Button design typeAvailable options:
"normal" : White (#ffffff)
"submit" : Blue (#206694)
content *1string/HTMLElement""The DOM inside buttonIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
disabledbooleanfalseEnable/Disable the component
visiblebooleantrueShow/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:

NameTypeDescriptionRemark
clickfunctionEvent handler when ClickedIt will pass the event object as the argument

Constructor

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

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}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

NameDescription
--kuc-mobile-button-background-color
--kuc-mobile-button-background-color-active
--kuc-mobile-button-background-color-focusThis 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);
});