Documentation
Components

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 colorDefines the background color of the element.
OpacityControls the transparency of the element (0 is fully transparent, 100 is fully opaque).
PaddingThe space between the element's content and its bounds.
Corner RadiusThe roundness of the element’s corners.
Border WidthThe thickness of the element's border.
Border ColorThe color of the element's border.
ElevationThe shadow effect that gives the element a sense of depth.

Sizing

WidthDefines the width of the element.
HeightDefines the height of the element.
Min WidthThe minimum width the element can have.
Max WidthThe maximum width the element can have.
Min HeightThe minimum height the element can have.
Max HeightThe maximum height the element can have.
Aspect RatioDefines the proportional relationship between width and height.

Click Action

Click ActionAn 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