compositor-components v0.0.6
2021 Compositor Helper Components
This is a small set of components to help plugin makers position elements inside the compositor.
Features
- Self destructing elements, for popups and alerts
- Simple CSS animation library, provided by tuesday
- Position elements with control inside the compositor overlay
Contributing
To start building this web component using Stencil, clone this repo to a new directory:
git clone https://github.com/The-WorkCast-Corporation/2021-compositor-components.git
cd 2021-compositor-components
and run:
yarn
yarn start
To build the component for production, run:
yarn build
Need help with stencil?? Check out the docs here.
Naming Components
When creating new component tags, we recommend not using stencil
in the component name (ex: <stencil-datepicker>
). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion
. You should use the prefix compositor
for these components
To generate a new component, run:
yarn generate compositor-YOUR_COMPONENT_NAME
You will find your new component ready to rock here: \src\components
Using this component
The first step for all three of these strategies is to publish to NPM.
In the Compositor
Call the 2021 Compositor Control Plane
Post to the control API to create elements with this library like this:
{
"action": "compositor-item",
"data": {
"id": "compositorheader",
"content": "<h1>I am content inside a self destroying element</h1>",
}
}
A full example with all the variables you can choose:
{
"action": "compositor-item",
"data": {
"id": "compositorheader",
"content": "<h1>I am content inside a self destroying element</h1>",
"top": "0",
"left": "0",
"right": "0",
"bottom": "",
"width": "100%",
"height": "100px",
"destroy": "5",
"enter": "animated tdFadeInUp",
"exit": "animated tdFadeOutDown",
"animationduration": "1.5"
}
}
Script tag
- Put a script tag similar to this
<script src='https://unpkg.com/compositor-components/dist/compositor-components/compositor-components.esm.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install compositor-components --save
- Put a script tag similar to this
<script src='node_modules/compositor-components/dist/compositor-components.esm.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
In a stencil-starter app
- Run
npm install compositor-components --save
- Add an import to the npm packages
import compositor-components;
- Then you can use the element anywhere in your template, JSX, html etc
In HTML
To use the <compositor-item>
component to animate and position elements, you will need to wrap it in a <compositor-container>
like this:
<compositor-container id="container">
<compositor-item
bottom="0%"
left="0%"
width="100%"
height="110px"
>
<h1>Your content</h1>
</compositor-item>
</compositor-container>
This example would create a 110px
banner across the top of the compositor, filling the screen width.
<compositor-container id="container">
<compositor-item
enter="animated tdFadeInDown"
exit="animated tdFadeOutUp"
animationduration="1.5"
destroy="5"
top="0%"
left="0%"
width="100%"
height="70px"
style="background-color: darkslategrey;"
>
<h3>Your footer</h3>
</compositor-item>
</compositor-container>
This example would create:
- A
70px
high banner across the bottom - Filling the screen width
- It will destroy itself after 5 seconds
- The background is dark grey
- It will animate in and out, and the animations will last for 1.5 seconds.
Note: You can use style tags to change the
compositor-item
background, among other things, but be aware that if you use any styles that override position, then the element may not behave you you might want.