You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 18 Next »

Use the <button> tag to add a button to your widget form. The behavior is similar to React's

By default, no action is connected to the button. If you want to add action that occurs when the clicks the button, use event-click attribute.

Available attributes:

AttributeTypeMandatoryDescription
buttonTypeStringN

Specify button display style for forms and lists

  • unstyled – a white color button
  • primary – a blue color button
  • approve – a green color button
  • destructive – a red color button
  • secondary – a transparent background for the button

Use the following button types along with the svg attribute:

  • icon-mini – a small square button

  • icon – a square button

  • icon-primary – a square button with blue background
  • icon-border – a square button with borders
  • expand – a rectanguar button with blue background, the svg is colored in blue as well
disabledBooleanN

Set the value to true to disable the button. The default value is false.

The disabled buttons appear in gray. 

isVisible

BooleanNSet the value to false to disable the tag display. The default value is true.
svgStringNSpecify the SVG code of a pre-decoded image file.
hintStringNAdd a text hint for the button.
classStringNSpecify the CSS class name that is defined in the CSS field of the widget.

To set a button, follow the example below:

Button
<checkbox model="data.userCanReject" event-change="window.s_widget_custom.canCheckboxHandler();"></checkbox>
  
<button buttonType="destructive" disabled={data.userCanReject} event-click="window.s_widget_custom.reject();">
  {data.rejectBtnTitle}
</button>


  • No labels