Button

420 views

When you place a component, the following code is defined by default.

<button data-comp-id=”button.1″ id=”button.1″>Button</button>

There are properties below

Property

Content

Data Mapping

Specifies the controls defined in the Magic program.
Click the gear button to display a list of controls.
You can choose from here.
Mapping Magic and passing click events to the Magic side.

Non Magic Control Magic

Specifies whether to prevent it from being linked to Magic xpa controls.

is inside Table

Check if placed in the table.
By adding [rowId] = ” row.rowId ” tags.

Button Style

Specify the display style of the button. You can specify it from below.

Default
CoreUI Button ……CoreUI buttons are used to initialize operations, both in the background and in the foreground.
Basic Button …… Rectangular flat button with no boundaries
Raised Button …… Rectangular stereoscopic button
Stroked Button … Rectangular plane button with border
Flat Button …… Rectangular plane button
Icon Button …… circular button with transparent background intended to contain icons
FAB …… Circular button on a stereo
Mini FAB …… Small circular button on a stereo

Button Color

Specify the button color. You can specify it from below.

Default
Primary
Accent
Warn

Is Visible

Specifies whether to display the control.
Magic returning a string
Specify the Angular function.

By setting mg.getVisible (mgc.XXXXXXXXX), it works with the Magic control ［ visible ］ property.

You can specify the following string.

visible …… The element box is visible.
hidden ……The element box will be invisible but will affect the layout as usual.
collapse ……the rows and columns become invisible and the area occupied is also removed. However, the dimensions of other rows and columns are calculated as when the cells of the invisible rows and columns exist.

If “Hidden”, it will no longer be displayed on the canvas.

Display If

Specifies whether to display the control.
Similar to Is Visible, but set a logical expression and specify it in True, or False.
Other mg.getValue (mgc.XXXXXXXXXX) ! If you type = ”, it will be displayed because XXXXXXXX is True if it is not blank.

If “False”, it will no longer be displayed from the canvas.

Tooltip

Specifies the tooltip to associate with the control.
Place the mouse cursor in this control to display the specified character.
Click the gear button to display the dialogue.
Now you can enter the text you want to display or select the Angular function.
It is possible to display the tooltip set by Magic in mg.getTitle (mgc.XXXXXXXXXX).

Disabled

We will set the invalidity, not the display or hiding.
Invalid elements are those that cannot be activated （ select, click, enter, etc. ） or focus.
By making mg.isDisabled (mgc.XXXXXXXXXX), it is associated with the invalidation of Magic.

Form

［ Push Button ］ Specifies the format of the control.

Label

Specify the text to display in the button.
Click the gear button to display the dialogue.
Now you can enter the text you want to display or select the Angular function.

Label Type

Specify the button label type. You can specify it from below.

Label Only …… Text only
Label and Icon …… text and icons
Icon Only …… Icon only

Label Color

Specify the color of the button label. You can specify it from below.

Default
Red
Green
Blue

Icon

Specify the icon to display.
Valid if [Label Type] is ” Label and Icon ” or “ Icon Only ”.
Click the gear button to display the dialogue.
Now you can select the icon to display.

Icon position

Specifies the position of the icon to display. Specify from.
Valid if [Label Type] is ” Label and Icon ” or “ Icon Only ”.

Start ……
End ……
Icon Top ……
Icon Bottom ……

Icon color

Specify the color of the icon. You can specify it from below.
Valid if [Label Type] is ” Label and Icon ” or “ Icon Only ”.

Default
Red
Green
Blue