Gracias por tu visita. Esta página solo está disponible en inglés.

APL Frame

A Frame holds a single child and has a border and background color.

Properties

The Frame component has the following properties in addition to the Component properties. See the meaning of the columns here.

Ensure that you include height and width in your Frame definition.

Property Type Default Styled Dynamic Description
backgroundColor Color none Yes Yes Background color.
borderBottomLeftRadius Absolute Dimension none Yes No Radius of the bottom-left corner. Overrides borderRadius.
borderBottomRightRadius Absolute Dimension none Yes No Radius of the bottom-right corner. Overrides borderRadius.
borderColor Color none Yes Yes Color of the border.
borderRadius Absolute Dimension 0 Yes No Corner radius for rounded-rectangle variant.
borderTopLeftRadius Absolute Dimension none Yes No Radius of the top-left corner. Overrides borderRadius if specified.
borderTopRightRadius Absolute Dimension none Yes No Radius of the top-right corner. Overrides borderRadius if specified.
borderWidth Number 0 Yes No Width of the border.
item Array of components and layouts [] No No Child component

When the Frame component is the target of an event, event.target reports the following values:

"event": {
  "target": {
    "disabled": Boolean, // True if the component is disabled
    "id": ID,            // ID of the component
    "uid": UID,          // Runtime-generated unique ID of the component
    "height": Number,    // Height of the component, in dp (includes the padding)
    "opacity": Number,   // Opacity of the component [0-1]
    "width": Number      // Width of the component, in dp (includes the padding)
  }
}

backgroundColor

The color of the background. The background is drawn inside of the border.

borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius

Dimensional radii to apply against the border. All radii must be specified in absolute dimensions. Relative dimensions are not supported. Setting the border radii on a Frame does not clip the children of the frame.

borderColor

The color of the border. Because the contents of a Frame are resized when the borderWidth changes (due to a style being applied), the borderWidth is frequently kept constant and the borderColor set to transparent (or backgroundColor) if a style needs to temporarily hide the border.

borderWidth

The width of the border. The border width must be specified in absolute dimensions. Relative dimensions are not supported. The border width does not affect the padding of the component. A drawn border is considered to be a background for the component and does not affect how the component is sized or positions its children.

item

The child component or layout. If more than one child is supplied, only the first one selected by the when property will be used.

Sample Frame

This example creates a 50 x 50 dp circle with a grey background and the text item centered in the circle.

{
  "type": "Frame",
  "borderRadius": 25,
  "width": "50",
  "height": "50",  
  "backgroundColor": "grey",
  "item": {
    "type": "Text",
    "text": "2",
    "width": "50",
    "height": "50",
    "textAlign": "center",
    "textAlignVertical": "center"
  }
}