Back

addCard

JS Py
Hello World
Content:
- Properties
- Methods

They are surfaces in material design that display content and actions on a single topic.

crd = ui.addCard( parent, content, options, width, height ) → ui object: Card
{
headerTitle: string, // card header title
headerSubtitle: string, // card header subtitle or subheader
headerAvatar: string, // card header avatar. can be a single character or a path to an image
headerAction: string, // card header action. A material icon font
media: string, // path to an image
bodyTitle: string, // title of the card content
bodyText: string, // long description of the card
actions: array, // list of icon buttons. can be a list of material-icon fonts if actionType is an "icon"
actionType: string, // type of action. can be a "button" or "icon"
onAction: function, // callback when card actions are clicked. refer to setOnAction method for arguments
onHeaderAction: function // callback when header action is clicked. refer to setOnHeaderAction method for arguments
}

These are the methods for Card component.

Example - Basic Card

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY");

        // initialize the content of the card
        var content = {
            bodyTitle: "Lizard",
            bodyText: "Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica",
            actions: ["Read more"]
        };

        // Create a card by passing the content object
        this.crd = ui.addCard(this.main, content, "primary", 0.8);

        // Add a callback handler when the action is click
        this.crd.setOnAction( this.onAction )
    }

    onAction(text, i)
    {
        ui.showPopup( text );
    }
}
class Main extends App
    onStart()
        # Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # initialize the content of the card
        content =
            bodyTitle: "Lizard",
            bodyText: "Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica",
            actions: ["Read more"]

        # Create a card by passing the content object
        this.crd = ui.addCard(this.main, content, "primary", 0.8)

        # Add a callback handler when the action is click
        this.crd.setOnAction( this.onAction )

    onAction(text, i)
        ui.showPopup( text )
Copy All       Run      

Example - Card with media

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // initialize the content of the card
        var content = {
            media: "https://picsum.photos/300/180",
            bodyTitle: "Card",
            bodyText: "They are surfaces in material design that display content and actions on a single topic. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.",
            actions: ["favorite", "share"],
            actionType: "icon"
        }

        // Create a card by passing the content object
        this.crd = ui.addCard(this.main, content, "primary", 0.8)

        // Add a callback handler when the action is click
        this.crd.setOnAction( this.onAction )
    }

    onAction(text, i)
    {
        ui.showPopup( text );
    }
}
class Main extends App
    onStart()
        # Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # initialize the content of the card
        content =
            media: "https:# picsum.photos/300/180",
            bodyTitle: "Card",
            bodyText: "They are surfaces in material design that display content and actions on a single topic. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.",
            actions: ["favorite", "share"],
            actionType: "icon"

        # Create a card by passing the content object
        this.crd = ui.addCard(this.main, content, "primary", 0.8)

        # Add a callback handler when the action is click
        this.crd.setOnAction( this.onAction )

    onAction(text, i)
        ui.showPopup( text )
Copy All       Run      

Example - Card with header

class Main extends App
{
onStart()
{
     // Create a fullscreen layout with objects vertically centered
     this.main = ui.addLayout("main", "Linear", "VCenter,FillXY,ScrollY")

     // initialize the content of the card with header information
     var content = {
         headerTitle: "DroidScript.org",
         headerSubtitle: "Posted on November 16, 2023",
         headerAvatar: "D",
         headerAction: "more_vert",
         media: "https://picsum.photos/300/180",
         bodyTitle: "Card",
         bodyText: "They are surfaces in material design that display content and actions on a single topic. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.",
         actions: ["favorite", "share"],
         actionType: "icon"
     }

     // Create a card by passing the content object
     this.crd = ui.addCard(this.main, content, "primary", 0.94)
     this.crd.headerAvatarColor = "green"

     // Add a callback handler when the action is click
     this.crd.setOnAction( this.onAction )

     // Add a callback handler when header action is click
     this.crd.setOnHeaderAction( this.onHeaderAction )
}

onAction(text, i)
{
     ui.showPopup( text );
}

onHeaderAction()
{
     ui.showPopup( "Header action is click" );
}
}
class Main extends App
onStart()
     # Create a fullscreen layout with objects vertically centered
     this.main = ui.addLayout("main", "Linear", "VCenter,FillXY,ScrollY")

     # initialize the content of the card with header information
     content =
         headerTitle: "DroidScript.org",
         headerSubtitle: "Posted on November 16, 2023",
         headerAvatar: "D",
         headerAction: "more_vert",
         media: "https:# picsum.photos/300/180",
         bodyTitle: "Card",
         bodyText: "They are surfaces in material design that display content and actions on a single topic. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.",
         actions: ["favorite", "share"],
         actionType: "icon"

     # Create a card by passing the content object
     this.crd = ui.addCard(this.main, content, "primary", 0.94)
     this.crd.headerAvatarColor = "green"

     # Add a callback handler when the action is click
     this.crd.setOnAction( this.onAction )

     # Add a callback handler when header action is click
     this.crd.setOnHeaderAction( this.onHeaderAction )

onAction(text, i)
     ui.showPopup( text )

onHeaderAction()
     ui.showPopup( "Header action is click" )
Copy All       Run      

Example - Card with additional controls

class Main extends App
{
onStart()
{
     // Create a fullscreen layout with objects vertically centered
     this.main = ui.addLayout("main", "Linear", "VCenter,FillXY,ScrollY")

     // initialize the content of the card with header information
     var content = {
         headerTitle: "DroidScript.org",
         headerSubtitle: "Posted on November 16, 2023",
         headerAvatar: "D",
         headerAction: "more_vert",
         media: "https://picsum.photos/300/180",
         bodyTitle: "UI Components",
         bodyText: "This is a card with additional UI Components as content.",
         actions: ["favorite", "share"],
         actionType: "icon"
     }

     // Create a card by passing the content object
     this.crd = ui.addCard(this.main, content, "primary", 0.96)
     this.crd.headerAvatarColor = "green"

     // Add a callback handler when the action is click
     this.crd.setOnAction( this.onAction )

     // Add a callback handler when header action is click
     this.crd.setOnHeaderAction( this.onHeaderAction )

     // Add a UI Button
     this.btn = ui.addButton(this.crd.layout, "Button", "Primary");
     this.btn.margins = [0, "1rem", 0, "1rem"];

     // Add a text component
     this.txt = ui.addText(this.crd.layout, "This is a UI component text added to a card layout. Below is a checkbox component.");

     // Add a checkboxgroup component
     this.ckb = ui.addCheckboxGroup(this.crd.layout, "Mango,Apple,Orange", "Left,Secondary", 1)
     this.ckb.label = "Select fruits"
}

onAction(text, i)
{
     ui.showPopup( text );
}

onHeaderAction()
{
     ui.showPopup( "Header action is click" );
}
}
class Main extends App
onStart()
     # Create a fullscreen layout with objects vertically centered
     this.main = ui.addLayout("main", "Linear", "VCenter,FillXY,ScrollY")

     # initialize the content of the card with header information
     content =
         headerTitle: "DroidScript.org",
         headerSubtitle: "Posted on November 16, 2023",
         headerAvatar: "D",
         headerAction: "more_vert",
         media: "https:# picsum.photos/300/180",
         bodyTitle: "UI Components",
         bodyText: "This is a card with additional UI Components as content.",
         actions: ["favorite", "share"],
         actionType: "icon"

     # Create a card by passing the content object
     this.crd = ui.addCard(this.main, content, "primary", 0.96)
     this.crd.headerAvatarColor = "green"

     # Add a callback handler when the action is click
     this.crd.setOnAction( this.onAction )

     # Add a callback handler when header action is click
     this.crd.setOnHeaderAction( this.onHeaderAction )

     # Add a UI Button
     this.btn = ui.addButton(this.crd.layout, "Button", "Primary")
     this.btn.margins = [0, "1rem", 0, "1rem"]

     # Add a text component
     this.txt = ui.addText(this.crd.layout, "This is a UI component text added to a card layout. Below is a checkbox component.")

     # Add a checkboxgroup component
     this.ckb = ui.addCheckboxGroup(this.crd.layout, "Mango,Apple,Orange", "Left,Secondary", 1)
     this.ckb.label = "Select fruits"

onAction(text, i)
     ui.showPopup( text )

onHeaderAction()
     ui.showPopup( "Header action is click" )
Copy All       Run      

Properties

The following properties are available on the Card object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
actions → List
actionType → Object
backColor → String
backImage → String
bodyText → String
bodyTitle → String
border → Number
borderColor → String
borderStyle → String
cornerRadius → Number
disabled → Boolean
el → Object
elevation → Number
elStyle → String
fontFile → String
headerAction → String
headerAvatar → String
headerAvatarColor → String
headerSubtitle → String
headerTitle → String
height → Number
isVisible → Boolean
layout → Object
left → Number
margins → List
media → String
opacity → Number
options → String
padding → List
parent → Object
position → Object
rotation → Number
textColor → String
textSize → Number
top → Number
type → String
visibility → String
width → Number

Methods

The following methods are available on the Card object:

addBodyItems( title, text )
addHeaderItems( title, subtitle, avatar, action )
animate( anim, duration )
bringForward( zIndex )
destroy()
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setMargins( left?, top?, right?, bottom?, mode? )
setOnAction( cb )
setOnContextMenu( callback )
setOnHeaderAction( cb )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
show()
Number: Fraction of the parent width.
Number: Fraction of the parent height.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-Left border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
String: “A comma separated option for the card.”
String: “The title of the content of the card.”
String: “The description of the card.”
String: “The title of the card.”
String: “The subheader of the card.”
String: “Can be a char or a path to an image.”
String: “Material icon font.”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit of measurement. Values are `px` `rem` or `%`.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
Object: The layout where to add the card.
Object: A JSON object representing the contents of the card. Passing the card contents on initialization makes your app layout loads faster than setting each property individually.
Object: The pointer event object.
function( icon , index )
function( event )
function()
crd.absHeight
Returns the absolute height of the control in pixels.
crd.absLeft
Returns the absolute distance of the control from the left in pixels.
crd.absTop
Returns the absolute distance of the control from the top in pixels.
crd.absWidth
Returns the absolute width of the control in pixels.
crd.actions
Sets or returns the list of card actions. If actionType is an "icon", provide a list of material icon fonts.
crd.actionType
Sets or returns the type of actions in the card. Values can be "button" or "icon". If "icon" please provide a material icon actions.
crd.addBodyItems
Add card body items. Using this method is faster than setting the individual.
crd.addHeaderItems
Add header items to the card. Using this method is faster than setting the individual header property.
crd.animate
Animate the component.
crd.backColor
A hexadecimal color of the form #rrggbb
crd.backImage
The path to your image file.
crd.bodyText
Sets or returns the text of the card content.
crd.bodyTitle
Sets or returns the title of the card content.
crd.border
Sets or returns the border thickness in pixels.
crd.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
crd.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
crd.bringForward
Bring this component forward by a given z-index.
crd.cornerRadius
Sets or returns the corner radius in pixels.
crd.destroy
Destroy the component.
crd.disabled
Sets or returns the disabled state of the control.
crd.el
Returns the html container element for the control.
crd.elevation
Sets or returns the elevation of the card.
crd.elStyle
Sets the style of the html container element.
crd.fontFile
Sets or returns the relative path to the font-family use.
crd.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
crd.gone
Destroy the component.
crd.headerAction
Sets or returns the card header action.
crd.headerAvatar
Sets or returns the card header avatar. Can be a character or a path to an image.
crd.headerAvatarColor
Sets or returns the card header avatar color in css supported color format.
crd.headerSubtitle
Sets or returns the card header subheader or subtitle.
crd.headerTitle
Sets or returns the card header title.
crd.height
Sets or returns the height of the control as a fraction of the parent control.
crd.hide
Hide the component.
crd.isVisible
Returns whether the control is visible or not.
crd.layout
Returns the div element of the card content. It is useful when you want to add ui components into the content of the card.
crd.left
Returns the distance of the control from the left.
crd.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
crd.media
Sets or returns the card media.
crd.opacity
Sets or returns the opacity of the control.
crd.options
Sets or returns the options of the control.
crd.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
crd.parent
Returns the parent layout control.
crd.position
Returns the position of the control. The returned object has left top right and bottom props.
crd.rotation
Sets or returns the angle of rotation in degrees.
crd.sendBackward
Bring this component backward by a given z-index.
crd.setBorder
Sets the border line for the component container.
crd.setCornerRadius
Sets the corner radius of the component.
crd.setMargins
Sets the margin of the component.
crd.setOnAction
Add a callback function to be called when a card action is click.
crd.setOnContextMenu
Adds a callback function on right click.
crd.setOnHeaderAction
Add a callback function to be called when the header action icon is click.
crd.setPadding
Sets the padding of the component's container.
crd.setPosition
Sets the position of the component relative to its parent dimensions.
crd.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
crd.setSize
Sets the size of the component.
crd.show
Show the component.
crd.textColor
Sets or returns the color of the text.
crd.textSize
Sets or returns the size of the text within the control.
crd.top
Returns the distance of the control from the top.
crd.type
Returns the type of the control.
crd.visibility
Sets or returns the visibility of the control.
crd.width
Sets or returns the width of the control as a fraction of the parent control.