Versions Compared

Old Version 23

changes.mady.by.user Александра Леденева

Saved on

compared with

New Version Current

changes.mady.by.user Александра Леденева

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Merged branch "DOC0000070" into parent

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

By default, no event is connected to the button. Use event-click attribute to add an event when a user clicks the button.

Available attributes:

AttributeTypeMandatoryDescription
buttonTypeStringN

Specify button display style for forms and lists. 

  • unstyled – a white color button
    • primary – a blue color button: Image Added
    • approve – a green color button: Image Added
    • destructive – a red color button: Image Added

    • secondary – a transparent background for the button with no borders: Image Added

    Use the following button types along with the svg attribute and without a text title:

    • icon
    -mini
    • – a
    small
    • square button, 32x32 pixels:Image Added

    • icon-mini – a square button that looks the same as icon but smaller – 20x20 pixels:Image Added

    • icon-primary – a square button with blue background, 32x32 pixels:Image Added
    • icon-border – a square button with borders, 32x32 pixels:Image Added

    Use the following button types along with the svg attribute and a text title:

    • expand – a rectangular button with light blue background:Image Added
    Info

    If you do not specify the buttonType or set the value that is not included in the list above,

    and specified svg is colored in blue as well

    the default button type is used – a button with transparent background and black borders: Image Added


    disabledBooleanN

    Set the value to true to disable the button.  A disabled button becomes gray and users cannot click it. The default value is false.

    isVisible

    		BooleanNSet the value to false to hide the button. 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.

    Example:

    <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>
    Code Block
    languagexml
    titleButton
    linenumberstrue
    <button buttonType="icon" hint="Add" svg='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z" fill="#2E3238"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="#2E3238"/>
</svg>' </button>

    The template above adds a button with a hint that appears when the user moves the pointer over it:

    Image Added