Card

434 views

The angular card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization.

Cards provide a flexible, extensible (through display logic) container for displaying content.

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

<c-card data-comp-id=”card.1″ id=”card.1″></c-card>

It is usually set inside a div or column, which in turn has rows, columns, divs, inputs, buttons etc.

Properties

content

Data

Specify the control defined in the Magic program. Click the gear button to display a list of controls. You can select from here. Map it with a Magic item and pass click events, etc. to the Magic side.

Is Visible

Specifies whether the control is displayed. You can specify the following values:

visible … display
hidden … non-display
collapse …… Collapses the rows and columns of a table
inherit – Inherits the settings of the parent element.

Clicking the gear button will display a list of Angular functions. You can specify and define functions from here. If you enter them directly, enclose them in quotation marks (“). In most cases, you will set the getVisible function like mg.getVisible(mgc.V_Dummy) and associate it with the visibility of Magic.

Alignment

Specify how to align the display. You can choose from the following:

Default
Left …… Left justified
Right …… Right-justified
Center …… Center alignment
Justify …… Equal distribution

Text Wrap

Specifies whether to wrap the text. You can choose from the following:

Normal …… Default value
Break Word …… Breaks text even in the middle of a word
Initial …… Reset to the initial value
Inherit – Inherits the properties of the parent element.

Text Transformation

Specifies how to convert text. You can choose from the following:

Default: No conversion.
Uppercase – Converts to uppercase.
Lowercase – Converts to lowercase.
Capitalize – Changes the first character to uppercase.

Display If

Specifies whether to display the control. This is similar to Is Visible, but you set a logical expression and specify it as True or False. For example, if you enter mg.getValue(mgc.V_Dummy) !=” and V_Dummy is not blank, it will become True and the control will be displayed.

For more details on the Card component, please use the below hyperlink.

Angular Card Component