Stencil Container
A stencil component that displays child elements with conditional data.
Using this component
Script tag
- Put
<script src='https://unpkg.com/stencil-container@latest/dist/stencil-container.js'></script>
in the head of your index.html - Then you can use the element
<st-container>
anywhere in your template, JSX, html etc
Node Modules
- Run
npm install stencil-container --save
- Put a script tag similar to this
<script src='node_modules/stencil-container/dist/stencil-container.js'></script>
in the head of your index.html - Then you can use the element
<st-container>
anywhere in your template, JSX, html etc
In a stencil-starter app
- Run
npm install stencil-container --save
- You might need to import the npm package in a tsx file with
import { } from 'stencil-container';
- Then you can use the element
<st-container>
anywhere in your template, JSX, html etc
Parameters
st-if
An expression that is either true or false.
Examples
Plain html
<st-container st-if="false"><div>false?</div></st-container>
Will not show the child elements content.
<st-container st-if="true"><div>true?</div></st-container>
Will show the child elements content.
<st-container><div>container test?</div></st-container>
Without the st-if parameter it assumes the content should be shown.
Javascript variables
Will be shown!Will not be shown!Will be shown!Will be shown!Will be shown!Will not be shown!
JSX variables
private expression1 = '1 == 1'; private expression2 = '1 == 2'; { return <div> <st =><div>Will be shown!</div></st-container> <st =><div>Will not be shown!</div></st-container> </div> ; }
Angular bindings
Let me know if it works! :)
Development
Installation:
git clone https://github.com/nerdic-coder/stencil-container.git stencil-containercd stencil-containernpm install
Running:
npm start
Tests:
npm run test
Watchable tests:
npm run test.watch
Blog article
Feel free to read my blog article on how I created this stencil component, How I created and published my first Stencil component
All feedback are welcome!