Tonada
Tonada is a free toolkit build with
Install
NPM:
npm install --save tonada
CDN:
<!-- Import all the tonada component styles -->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
<!-- (Optional) Or you can import the component style you going to use-->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/icons.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/input-group.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/input-password.css"
/>
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/select.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/slider.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/accordion.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/button.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/checkbox.css" />
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/checkbox-group.css"
/>
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/sidenav.css" />
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/auto-complete.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/input-slider.css"
/>
<!-- ... -->
<!-- (Required) β -->
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<!-- (Optional) -->
<script src="https://unpkg.com/tonada/dist/js/input.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-password.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-group.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox-group.js"></script>
<script src="https://unpkg.com/tonada/dist/js/select.js"></script>
<script src="https://unpkg.com/tonada/dist/js/slider.js"></script>
<script src="https://unpkg.com/tonada/dist/js/accordion.js"></script>
<script src="https://unpkg.com/tonada/dist/js/sidenav.js"></script>
<script src="https://unpkg.com/tonada/dist/js/auto-complete.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-slider.js"></script>
Getting Started
We going to import the style files for the components we will use and let's assume we will use all the components then import the index style file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Import all the styles -->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
<!-- Or what you going to use only and i will use input style -->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
</head>
<body>
<div id="element" class="floating-label">
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<label for="">Name</label>
</div>
<!-- (Required) β -->
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<!-- I Going to import the Input only-->
<script src="https://unpkg.com/tonada/dist/js/input.js"></script>
<script>
const input = Tonada.create("input", document.querySelector("#element"));
</script>
</body>
</html>
For more Documentation
You can Choose from tonada various components and features
Table of Contents:
Inputs:
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input.js"></script>
<div id="element">
<input class="tonada-input" type="text" name="name" placeholder="Name" />
</div>
const input = Tonada.create("input", document.querySelector("#element"));
Floating Label
Enable floating label by add floating-label
class and it work on the password inputs and input groups the same way.
<div class="floating-label">
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<label for="">Name</label>
</div>
Error State
<div class="floating-label tonada-invalid">
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<label for="">Name</label>
</div>
<ul class="tonada-errors">
<li>Name is required</li>
<!-- <= Add all the errors as a list -->
<li>Should be character [A-Z a-z]</li>
</ul>
Sizes
The available sizes are tonada-
(sm
-lg
-xl
)
<div class="tonada-sm">
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<label for="">Name</label>
</div>
Input Group:
<div id="element">
<span>$</span>
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<span>.00</span>
</div>
const input = Tonada.create("input-group", document.querySelector("#element"));
Floating Label
<div>
<span>$</span>
<div class="floating-label tonada-inputs">
<!-- <= add "floating-label class" -->
<input class="tonada-input" type="text" name="name" placeholder="Name" />
<label for="">Name</label>
</div>
<span>.00</span>
</div>
Password:
<div id="element">
<input
type="password"
class="tonada-input"
name="password"
placeholder="password"
/>
<i class="tonada-password-toggle tonada-ic-show"></i>
</div>
const input = Tonada.create(
"input-password",
document.querySelector("#element")
);
Floating Label
<div class="floating-label">
<input
type="password"
class="tonada-input"
name="password"
placeholder="password"
/>
<label for="">Password</label>
<i class="tonada-password-toggle tonada-ic-show"></i>
</div>
Sizes
The available sizes are tonada-
(sm
-lg
-xl
)
<div class="tonada-sm">
<input
type="password"
class="tonada-input"
name="password"
placeholder="password"
/>
<label for="">Password</label>
<i class="tonada-password-toggle tonada-ic tonada-ic-show"></i>
</div>
Slider:
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/slider.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/slider.js"></script>
<div id="element">
<ul class="tonada-list">
<li class="tonada-list-item">1</li>
<li class="tonada-list-item">2</li>
<!-- etc -->
</ul>
<button class="tonada-slider-button tonada-prev">
<i class="tonada-ic tonada-ic-arrow-left"></i>
</button>
<button class="tonada-slider-button tonada-next">
<i class="tonada-ic tonada-ic-arrow-right"></i>
</button>
<div class="tonada-slider-paginator"></div>
</div>
Tonada.create("slider", document.querySelector("#element"), {
itemsPerPage: 4,
slideAnimation: "moving",
});
API
Name | Description | Type |
---|---|---|
itemsPerPage | number of items per page. | number |
slideAnimation | how the slider going to slide between pages | "moving" or "fading" |
autoSliding | Enable auto sliding. | boolean |
autoSlidingDuration | The duration for sliding between items only works with slideAnimation=fading |
number |
paginator | Show or hide the pages buttons. | boolean |
navigators | Show or hide the next and previous buttons. | boolean |
Select:
<div id="element">
<select>
<option value="1">Option 1</option>
<!-- etc -->
</select>
</div>
Tonada.create("select", document.querySelector("#element"), {
multiple: true,
disabled: true,
});
API
Name | Description | Type |
---|---|---|
multiple | number of items per page. page. | number |
disabled | boolean for disabled or enable. | boolean |
Checkbox
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/checkbox.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox.js"></script>
<div id="element">
<label for="checkbox_1">...</label>
<input id="checkbox_1" type="checkbox" />
</div>
Tonada.create("checkbox", document.querySelector("#element"));
Disabled
checkbox support the input default attributes so if you marked as checked it wil be checked or you can mark it as disabled like now.
<div id="element">
<label for="checkbox_1">...</label>
<input id="checkbox_1" type="checkbox" disabled checked />
</div>
Checkbox Group
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/checkbox-group.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox-group.js"></script>
<div id="element">
<div>
<label for="test3">Option 1</label>
<input id="test3" type="radio" name="tonada-checkbox-group" value="1" />
</div>
<div>
<label for="test4">Option 2</label>
<input
id="test4"
type="radio"
name="tonada-checkbox-group"
value="2"
checked
/>
</div>
<div>
<label for="test5">Option 3</label>
<input id="test5" type="radio" name="tonada-checkbox-group" value="3" />
</div>
</div>
Tonada.create("checkbox-group", document.querySelector("#element"));
Buttons
For buttons you don't need to add javascript but you can apply it by add this class on the button tonada-button
and we have different types of the buttons
tonada-button-primary
tonada-button-secondary
<button class="tonada-button tonada-button-primary" type="button">
Submit
</button>
<button class="tonada-button tonada-button-secondary" type="button">
Submit
</button>
<button class="tonada-button" type="button" disabled>Submit</button>
Accordion
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/accordion.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/accordion.js"></script>
<div id="element" class="tonada-accordion">
<div class="tonada-accordion-section">
<div class="tonada-accordion-header">
<h4>This is panel header 1</h4>
</div>
<div class="tonada-accordion-content">
<p>
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many households
across the world.
</p>
</div>
</div>
<div class="tonada-accordion-section">
<div class="tonada-accordion-header">
<h4>This is panel header 2</h4>
</div>
<div class="tonada-accordion-content">
<p>
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many households
across the world.
</p>
</div>
</div>
</div>
const accordion = Tonada.create(
"accordion",
document.querySelector("#element")
);
Sidenav
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/sidenav-menu.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/sidenav-menu.js"></script>
<div id="element">
<div class="tonada-sidenav-menu"></div>
<div class="tonada-sidenav-content">...</div>
</div>
const sidenav = Tonada.create("sidenav", document.getElementById("element"), {
menuItems: [
{
/* Main Section only (required) */
title: "Getting Started",
/* OR as HTML */
// title: "<span>Getting Started</span>"
/* OR as function */
// title: function (menuItem) {
// return <span>Getting Started</span>;
// },
},
/* Only single link */
{
title: "Installation",
/* icon as html (optional) */
iconHTML: `<svg>...</svg>`,
/* which path going to go after click on the link */
to: "/installation",
/* disabled the menu item */
disabled: true,
},
{
title: "Dropdown Page",
iconHTML: `<svg>...</svg>`,
/* Sub Links (optional) */
children: [
{
title: "Sub page",
iconHTML: `<svg>...</svg>`,
to: "/sub-page",
},
],
},
],
/* Close the other menus if there is an menu opened */
toggleOnlyOne: true,
/* Be to toggle mode on load */
toggled: true,
});
/* can close the menu items */
// sidenav.closeAllMenuItems();
/* Do something when minimize and extend the sidenav*/
//sidenav.onToggled((e) => {
/* Event data into e.detail and will be (closed) or (opened) */
//});
API
Sidenav
Name | Description | Type |
---|---|---|
showToggler | show or hide the toggler button | boolean |
toggled | sidenav expanded by default | boolean |
menuItems | sidenav menu items | boolean |
MenuItem
Name | Description | Type |
---|---|---|
title (Required) | for the menu title | string / function / dom element |
iconHTML | the menu icon | string / function / dom element |
disabled | for disabled or enable | boolean |
to | for the menu link url | boolean |
onToggled | do something when any menuitem had triggered and you will be have all the information about the menu item | function |
isOpened | set menu opened by default | boolean |
children | menu sub links | MenuItem |
AutoComplete
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/auto-complete.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/auto-complete.js"></script>
<div id="element">
<div class="tonada-auto-complete-input">
<input class="tonada-input" type="text" />
</div>
</div>
const autoComplete = Tonada.create(
"auto-complete",
document.querySelector("#element")
);
autoComplete.onSearch(async (search) => {
// do something on searching
const data = await getData(search);
// open the menu with the data you had fetched and pass an array of Items
autoComplete.open(
data.map((record) => ({
value: record.id,
container: (item) => record.name,
// ...
}))
);
});
autoComplete.onSelect((value) => {
// do something
});
API
AutoComplete
Name | Description | Type |
---|---|---|
value | input default value | string |
disabled | disable the input | boolean |
close | close the menu | function |
onSelect | an event executed if you have selected an item | function(selectedItemValue) |
onSearch | and event executed if you have searching | function(searchValue) |
Item
Name | Description | Type |
---|---|---|
container | the item content and if the item has children then it will be a wrapper for the items | string/function/object |
title | item title you can pass function or string or Object | string/function/object |
isSelected | selected by default | boolean |
items | child items to display a custom content for every item | Item |
value | unique value for track the selected item | string |
InputSlider
<link
rel="stylesheet"
href="https://unpkg.com/tonada/dist/css/input-slider.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-slider.js"></script>
<div id="element" class="tonada-input-slider"></div>
const inputSlider = Tonada.create(
"input-slider",
document.querySelector("#element"),
{
min: 10,
max: 10,
step: 1,
value: 5,
}
);
inputSlider.onChange((e) => {
console.log(`value: ${e.detail.result}`);
});
API
InputSlider
Name | Description | Type |
---|---|---|
min | minimum value | number |
max | maximum value | number |
step | how much value will change every move | number |
value | the current value | number |
onChange | triggered on value changed | function(e:CustomEvent) |
Customization
This is our project file structure and you have 2 options : Every Sass variable in Tonada includes the !default flag allowing you to override the variableβs default value in your own Sass without modifying Tonadaβs source code. (Recommended)
// Default variable overrides
$tn-font-size: 16px;
$tn-border-radius: 8px;
// Required
@import "../node_modules/tonada/src/scss/variables";
@import "../node_modules/tonada/src/scss/mixins";
@import "../node_modules/tonada/src/scss/root";
// Optional
@import "../node_modules/tonada/src/scss/input";
@import "../node_modules/tonada/src/scss/slider";
// ...
Tonada
β£ πsrc
β β£ πscss
β β β β£ πindex.scss # It import all the component or you can import only your needs
β β β β£ πaccordion.scss
β β β β£ πbutton.scss
β β β β£ πcheckbox-group.scss
β β β β£ πcheckbox.scss
β β β β πinput-group.scss
β β β β πinput-group.scss
Or by override css root variables or override our classes
<link rel="stylesheet" href="../dist/css/button.css" />
<link rel="stylesheet" href="../dist/css/icons.css" />
<link rel="stylesheet" href="../dist/css/input.css" />
<style>
:root {
--tonada-color-primary: #1c3879;
--tonada-color-secondary: #607eaa;
--tonada-color-success: #30dd78;
--tonada-color-danger: #ff004c;
--tonada-color-white: #ffffff;
/* etc */
}
.tonada-checkbox {
/* etc */
}
</style>
Tonada
β£ πdist
β β£ πcss
β β β β£ πindex.css # Import this or only the components you need
β β β β£ πaccordion.css
β β β β£ πbutton.css
β β β β£ πcheckbox-group.css
β β β β£ πcheckbox.css
β β β β πinput-group.css
Contributions
Contributions are welcome, please open an issue and preferably file a pull request. check Pull-Request-Guidelines
Development
This project build using
Issues
please let us know more about your issues and suggestions to make tonada better Report about issue
License
Please read License for more information