Components
Screens in Paper consist of Components. You can think of Components like building blocks.
There are simple Components such as Text and Image that display a simple piece of information.
A Container can hold multiple components.
You can build richer components by combining multiple components together.
Styling your components with Properties
Every component in a screen a series of properties that can be defined.
Panel will be displayed with all available properties for the given element.
Here is a list of all properties that can be set to all components in a screen:
Appearance
Background color | Defines the background color of the element. |
Opacity | Controls the transparency of the element (0 is fully transparent, 100 is fully opaque). |
Padding | The space between the element's content and its bounds. |
Corner Radius | The roundness of the element’s corners. |
Border Width | The thickness of the element's border. |
Border Color | The color of the element's border. |
Elevation | The shadow effect that gives the element a sense of depth. |
Sizing
Width | Defines the width of the element. |
Height | Defines the height of the element. |
Min Width | The minimum width the element can have. |
Max Width | The maximum width the element can have. |
Min Height | The minimum height the element can have. |
Max Height | The maximum height the element can have. |
Aspect Ratio | Defines the proportional relationship between width and height. |
Click Action
Click Action | An action that will be performed when this element is clicked |
Component specific Properties
On top of the Default Properties every component has its own specific properties.
Find out about each component's unique properties by selecting one from the list, such as Container and Buttons