Frame

This is a wrapper component for content components. This adds a frame border and optional corners with a background to hold content.

<Frame animate level={1} corners={3}>
    <p>An SciFi Project</p>
</Frame>
Prop nameTypeDefaultDescription
AnimationanyAnimationComponent
themeanyRequired
classesanyRequired
animatebool
showbooltrue
animationobject
soundsobject{}

It uses the deploy player.

layerenum'primary'
One of: 'primary', 'secondary', 'header', 'control', 'success', 'alert', 'disabled'
levelenum0

The background color level. The bigger the brighter.

One of: 0, 1, 2, 3
cornersenum0

The corners size.

One of: 0, 1, 2, 3, 4, 5, 6
borderbooltrue

If border should be shown.

disabledbool
activebool
hoverbool

If component should be animated on mouse hover.

noBackgroundbool

Prevent background to be shown.

childrenany

If function, receives the animation status object.

Source code: src/Frame Open in: Playground