Components - Paper

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 Stack 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.

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 Stack and Buttons