Skip to content
A stencil component that displays child element if all conditions are fulfilled.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
LICENSE
README.md
package-lock.json
package.json
stencil.config.js
tsconfig.json

README.md

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

<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>

JSX variables

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>
    );
  }
}

Angular bindings

Let me know if it works! :)

Development

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

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!

You can’t perform that action at this time.