Getting Started

Using Shinobi is as easy as one, two, three!

1) Install Shinobi

Whether you used npm to install or downloaded the project itself, simply link to the library in your HTML pages.

<script src="../src/core_rate.js"></script>
<script src="../src/core_switch.js"></script>
<script src="../src/core_tooltip.js"></script>

You can also link directly to a CDN:

<script src="https://cdn.jsdelivr.net/npm/shinobirockstar@1.0.0/src/core_rate.js"></script>

There is a minified version available as well. This is autogenerated by jsdelivr.

<script src="https://cdn.jsdelivr.net/npm/shinobirockstar@1.0.0/src/core_rate.min.js"></script>

2) Add a component

Each component is named core-COMPONENT_NAME, where COMPONENT_NAME is the name of the component. Each component comes with default values allowing you to get started using just one simple line of code.

There are currently three components

They can be used like so:

<core-tooltip>  
        <core-switch></core-switch>  
</core-tooltip>  
<core-rate></core-rate>  

Because they are standard web components, you can use the attributes that you already know and use, like so:

<core-tooltip content="This is a switch" tabindex="1" id="exampleSwitch">
    <div class="switch_group">
        <core-switch></core-switch>
    </div>
</core-tooltip>
<core-tooltip content="Show us some love!" tabindex="2" id="exampleRate">
    <div class="rate_group">
        <core-rate></core-rate>
    </div>
</core-tooltip>

2) Customize!

While all components have specific attributes, many share common ones such as active color and the option to use an icon library like font-awesome.

//change color 
<core-switch active-color='#53D96D'></core-switch>
<core-rate colors="[red,gold,green]" void-color="black" low-threshold="1" high-threshold="5"></core-rate>
//change icon
<core-rate icon-classes="fas fa-smile" void-icon-class="fas fa-frown"></core-rate>

3) And you’re done!

Visit the API docs for a complete list of attributes.