Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nerdic-coder/stencil-container
A stencil component that displays child element if all conditions are fulfilled.
https://github.com/nerdic-coder/stencil-container
javascript jsx stencil stencil-components stencil-js stenciljs stenciljs-components typescript webcomponent webcomponents
Last synced: 2 days ago
JSON representation
A stencil component that displays child element if all conditions are fulfilled.
- Host: GitHub
- URL: https://github.com/nerdic-coder/stencil-container
- Owner: nerdic-coder
- License: mit
- Created: 2018-05-17T17:24:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-27T20:13:20.000Z (over 6 years ago)
- Last Synced: 2024-12-17T13:09:43.321Z (18 days ago)
- Topics: javascript, jsx, stencil, stencil-components, stencil-js, stenciljs, stenciljs-components, typescript, webcomponent, webcomponents
- Language: TypeScript
- Homepage:
- Size: 70.3 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stencil Container
A stencil component that displays child elements with conditional data.
## Using this component
### Script tag
- Put `` 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 stencil-container --save`
- Put a script tag similar to this `` 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 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 `` anywhere in your template, JSX, html etc
## Parameters
### st-if
An expression that is either true or false.
## Examples
### Plain html
`
false?`
Will not show the child elements content.
`
true?`
Will show the child elements content.
`
container test?`
Without the st-if parameter it assumes the content should be shown.
### Javascript variables
```html
var numberOne = 1;
var numberTwo = 2;
var booleanTrue = true;
var booleanFalse = false;
Will be shown!
Will not be shown!
Will be shown!
Will be shown!
Will be shown!
Will not be shown!
```
### JSX variables
```jsx
export class MyApp {
private expression1 = '1 == 1';
private expression2 = '1 == 2';
render() {
return (
Will be shown!
Will not be shown!
);
}
}
```
### Angular bindings
Let me know if it works! :)
## Development
Installation:
```bash
git clone https://github.com/nerdic-coder/stencil-container.git stencil-container
cd stencil-container
npm install
```
Running:
```bash
npm start
```
Tests:
```bash
npm run test
```
Watchable tests:
```bash
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](https://nerdic-coder.com/2018/05/27/how-i-created-and-published-my-first-stencil-component/)
All feedback are welcome!