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

In addition to theComponent properties, the Frame component has the following properties. Ensure that you include height and width in your Frame definition.

Property Type Required Styled Dynamic Description
backgroundColor Color No Yes Yes Background color. Defaults to transparent.
borderBottomLeftRadius Dimension: Properties No Yes Yes Radius of the bottom-left corner. Overrides borderRadius.
borderBottomRightRadius Dimension: Properties No Yes Yes Radius of the bottom-right corner. Overrides borderRadius.
borderColor Color No Yes Yes Color of the border. Defaults to transparent.
borderRadius Dimension: Properties No Yes Yes Corner radius for rounded-rectangle variant. Defaults to 0.
borderTopLeftRadius Dimension: Properties No Yes Yes Radius of the top-left corner. Overrides borderRadius if specified.
borderTopRightRadius Dimension: Properties No Yes Yes Radius of the top-right corner. Overrides borderRadius if specified.
borderWidth Number No Yes Yes Width of the border. Defaults to 0 (no border).
item Array of components and layouts No No No Child component

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 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"
  }
}