Yoso Toolbox
ToDo
Installation
Install the package using bower bower install yoso-toolbox
to your project.
After installation, link the component in your application html file.
<head>
<link rel="import" href="bower-components/yoso-toolbox/yoso-toolbox.html">
</head>
Do not forget to adjust the bower path to your application.
Use
Code:
<yoso-toolbox-container style="height:300px; width:20vw;">
<yoso-toolbox caption="Tools A">
<yoso-toolbox-group caption="Caption A">
<div class="content">Content goes here...</div>
</yoso-toolbox-group>
<yoso-toolbox-group caption="Caption B">
<div class="content">A lo...ot of content goes here...</div>
</yoso-toolbox-group>
<yoso-toolbox-group caption="Caption C">
<div class="content">Content goes here...</div>
</yoso-toolbox-group>
</yoso-toolbox>
<yoso-toolbox caption="Tools B">
<yoso-toolbox-group caption="Caption D">
<div class="content">Content goes here...</div>
</yoso-toolbox-group>
</yoso-toolbox>
</yoso-toolbox-container>
Attributes: Please refer to the Polymer layout attributes.
Developing and testing
Good unit tests are essential to your verification plan but a good way to quickly sanity test your component is to access your demo.html file via a local web server. There are several ways to do this but one easy method is to run a simple web server that ships with Python, using the commands:
python -m SimpleHTTPServer
Or other method using NodeJS:
http-server ./
This starts a web server on port 8000, so you can test your new element by navigating a browser to localhost:8000/demo.html
.
web-component-tester
The tests are also compatible with web-component-tester. You can run them on multiple local browsers via:
sudo npm install -g web-component-tester
wct