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 name | Type | Default | Description |
---|---|---|---|
Animation | any | AnimationComponent | |
theme | any | Required | |
classes | any | Required | |
animate | bool | ||
show | bool | true | |
animation | object | ||
sounds | object | {} | It uses the |
layer | enum | 'primary' | One of: 'primary' , 'secondary' , 'header' , 'control' , 'success' , 'alert' , 'disabled' |
level | enum | 0 | The background color level. The bigger the brighter. One of: 0 , 1 , 2 , 3 |
corners | enum | 0 | The corners size. One of: 0 , 1 , 2 , 3 , 4 , 5 , 6 |
border | bool | true | If border should be shown. |
disabled | bool | ||
active | bool | ||
hover | bool | If component should be animated on mouse hover. | |
noBackground | bool | Prevent background to be shown. | |
children | any | If function, receives the animation status object. |
Source code: src/Frame
Open in: Playground