Customize toolbar action buttons

Since version 1.0.1 it's possible to customize the appearance of the sign, dismiss, commit and finish buttons on the header toolbar.

To achieve this, you need to define a customization object into the MobbSign configuration object, with the following structure:

const config = {
  // Rest of parameters
  customization: {
    signButton: { color: '#90EE90' },
    confirmButton: { theme: 'primary' },
    discardButton: { theme: 'danger', color: 'FF0000' },
    doneButton: { color: '#4B0082' }
  }
};

new MobbSign(config).then(mobbsign => {
  console.log("This is my initialized MobbSign instance", mobbsign);
});

Parameters

Parameter	Attributes	Description
signButton	theme or color	Customize sign button appereance
confirmButton	theme or color	Customize Confirm signature button
discardButton	theme or color	Customize Discard signature button
doneButton	theme or color	Customize Finish button

theme vs color

theme

MobbSign Web offers a list of predefined themes that can be chosen to customize the appearance of each button.

Predefined themes are:

Theme	Button appearance (icon and label)	Button appearance (pressed)	Description
primary			Blue theme
success			Success green theme
warning			Warning yellow theme
danger			Danger red theme
light			Light theme
dark			Dark theme
info			Light blue theme

color

If none of the predefined themes fit your needs or you want to use a custom color, you can use the color attribute to define the color of the button icon and label. color must be specified in HEX format.

The button background color when it's clicked or hovered over is calculated from the indicated color, applying a lightening algorithm.

theme attribute predominates over color attribute. If you fill both, theme value will be used.

An example

The indigo color (#4B0082) is used to customize the finish button:

  customization: {
    doneButton: { color: '#4B0082' }
  }

The results are:

Button appearance (icon and label)	Button appearance (pressed)	Description
		indigo colored finish button