This is a draft of a kanban Web Component built with Stenciljs and based on valueflows syntax. This project is based on stencil component starter repository, although I used postcss instead of SASS in my workflow.
The whole kanban with bins and cards
<oce-kanban bins=[...] />
Props
- bins:
Array<bin>
A single bin, to be filled with cards
<oce-bin cards={this.cards} outputs={this.outputs} due={this.due} title={this.title} note={this.note} />
Props
- cards:
Array<card>
, - outputs:
Array<output>
, - due: string,
- title: string,
- note: string
A single card that represent a commitment
<oce-card members={this.members} due={this.due} note={this.note} action={()=>{console.log('hello')}} />
Props
- members:
Array<members>
, - due: string,
- note: string,
- action: Function
The ouptut resource of a bin <oce-output outputs={this.outputs} />
Props
- resourceClassifiedAs : { name: string }
Follow these steps to run locally the kanban webcomponent:
git clone https://github.com/ivanminutillo/kanban-webcomponent.git
cd kanban-webcomponent
git remote rm origin
and run:
npm install
npm start
To watch for file changes during develop, run:
npm run dev --es5
It uses post-css to create and compile css. Postcss-cli is required to build correctly the project:
npm i -g|-D postcss-cli
- Insert the following scripts tag
<script src='https://unpkg.com/kanban-webcomponent/dist/resources-flow.js'></script>
to access the webcomponet and<link rel="stylesheet" type="text/css" href="https://unpkg.com/kanban-webcomponent/dist/styles/main.css">
if you want to import the style, in the head of your index.html - Then you can use
<oce-kanban />
webcomponent anywhere in your template, JSX, html etc
- Run
npm install kanban-webcomponent --save
- Put this script tag
<script src='https://unpkg.com/kanban-webcomponent/dist/resources-flow.js'></script>
in the head of your index.html - Import the style from the
node-modules
according to your preferences - Then you can use the element anywhere in your template, JSX, html etc
TODO
TODO
- Ivan Minutillo - Initial work - twitter
This project is licensed under the MIT License - see the LICENSE.md file for details
- Ionic Team for the stenciljs amazing tool