A stencil component that displays child elements with conditional data.
- 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
- 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
- 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
An expression that is either true or false.
<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.
<script>
var numberOne = 1;
var numberTwo = 2;
var booleanTrue = true;
var booleanFalse = false;
</script>
<st-container st-if="booleanTrue"><div>Will be shown!</div></st-container>
<st-container st-if="booleanFalse"><div>Will not be shown!</div></st-container>
<st-container st-if="numberOne"><div>Will be shown!</div></st-container>
<st-container st-if="numberTwo"><div>Will be shown!</div></st-container>
<st-container st-if="numberOne == numberOne"><div>Will be shown!</div></st-container>
<st-container st-if="numberOne == numberTwo"><div>Will not be shown!</div></st-container>
export class MyApp {
private expression1 = '1 == 1';
private expression2 = '1 == 2';
render() {
return (
<div>
<st-container st-if={this.expression1}><div>Will be shown!</div></st-container>
<st-container st-if={this.expression2}><div>Will not be shown!</div></st-container>
</div>
);
}
}
Let me know if it works! :)
Installation:
git clone https://github.com/nerdic-coder/stencil-container.git stencil-container
cd stencil-container
npm install
Running:
npm start
Tests:
npm run test
Watchable tests:
npm run test.watch
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!