APL Frame (APL 1.4 to 1.5)
(This is not the most recent version of APL. Use the Other Versions option to see the documentation for the most recent version of APL)
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 base component properties. See the meaning of the columns.
Ensure that you include height
and width
in your Frame definition.
Property | Type | Default | Styled | Dynamic | Description |
---|---|---|---|---|---|
|
none |
Yes |
Yes |
Background color. | |
|
Non-negative Absolute Dimension |
none |
Yes |
No |
Radius of the bottom-left corner. Overrides |
|
Non-negative Absolute Dimension |
none |
Yes |
No |
Radius of the bottom-right corner. Overrides |
|
none |
Yes |
Yes |
Color of the border. | |
|
Non-negative Absolute Dimension |
0 |
Yes |
No |
Corner radius for rounded-rectangle variant. |
|
Non-negative Absolute Dimension |
|
Yes |
Yes |
Width of the border stroke. |
|
Non-negative Absolute Dimension |
none |
Yes |
No |
Radius of the top-left corner. Overrides |
|
Non-negative Absolute Dimension |
none |
Yes |
No |
Radius of the top-right corner. Overrides |
|
Non-negative Absolute Dimension |
0 |
Yes |
No |
Width of the border. |
|
Array of components and layouts to display inside the Frame. |
[] |
No |
No |
Child component |
When the Frame
is the source or target of an event, the following values are reported in event.source
or event.target
:
{
// Frame-specific values
"type": "Frame",
// General component values
"bind": Map, // Access to component data-binding context
"checked": Boolean, // Checked state
"disabled": Boolean, // Disabled state
"focused": Boolean, // Focused state
"height": Number, // Height of the component, in dp (includes the padding)
"id": ID, // ID of the component
"opacity": Number, // Opacity of the component [0-1]
"pressed": Boolean, // Pressed state
"uid": UID, // Runtime-generated unique ID of the component
"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 properties
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.
The borderRadius
property lets you set this value for all corners one time. You can override borderRadius
for each corner of theFrame
separately:
borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius
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.
borderStrokeWidth
The width of the drawn border around the Frame
. When not specified, borderStrokeWidth
defaults to the specified borderWidth
. When specified, the actual width of the drawn border is the smaller value of the borderStrokeWidth
and borderWidth
. You can't draw a border outside of the border width.
Set this property separately from borderWidth
when you want to vary the width of the drawn border without re-laying out the positions of components in their parent. For example, assume you set borderWidth
to 10
and borderStrokeWidth
to 5
. The component displays with a five-pixel border, but occupies enough space on the viewport for a ten-pixel border. When you change borderStrokeWidth
to 10
, the component displays with a ten-pixel border without changing the amount of space the component occupies.
In contrast, if you use borderWidth
on its own and change it from 5
to 10
, the components displayed on the screen shift to accommodate the larger border.
borderWidth
The width of the border. Specify the border width in absolute dimensions. Relative dimensions are not supported. The border width doesn't 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, items
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"
}
}
Last updated: Nov 28, 2023