tooolbar v0.1.7
______ ___ __
/\__ _\ /\_ \ /\ \
\/_/\ \/ ___ ___ ___\//\ \ \ \ \____ __ _ __
\ \ \ / __`\ / __`\ / __`\\ \ \ \ \ '__`\ /'__`\ /\`'__\
\ \ \/\ \L\ \/\ \L\ \/\ \L\ \\_\ \_\ \ \L\ \/\ \L\.\_\ \ \/
\ \_\ \____/\ \____/\ \____//\____\\ \_,__/\ \__/.\_\\ \_\
\/_/\/___/ \/___/ \/___/ \/____/ \/___/ \/__/\/_/ \/_/
Interactive toolbar rendered from LINES OF JSON. Lightweight yet powerful, you can build a toolbar in literally seconds with this 7KB (GZipped) package.
Features
Lightweight, with absolute ZERO dependency,
Tooolbar
bundles to 20KB unzipped and only 7KB gzipped 😍.Easy to use, generate a nice-looking toolbar using a simple json 😱.
Cool Components, check out IconCounter, IconScroller, IconSwitcher and others 🤩.
Extensibility, build a full-featured custom component in ~50 lines of code.
Get Started
npm
npm install tooolbar
yarn
yarn add tooolbar
CDN
<script src="https://unpkg.com/tooolbar"></script>
<script src="https://cdn.jsdelivr.net/npm/tooolbar"></script>
Document
Basic Usage
const bar = new Bar({ iconBaseUrl: "assets/icon" })
.bindTo(container)
.load([
{ id: "image", type: 'ib', icon: "image", label: "Gallery" },
{ id: "file", type: 'ib', icon: "file", label: "Documents" },
{ id: "game-controller", type: 'ib', icon: "game-controller", label: "Games" },
{ id: "book", type: 'ib', icon: "book", label: "Bookshelf" },
{ type: '-', width: "100px" },
{type: '|', height: "40%"},
{ id: "bell", type: 'ib', icon: "bell", label: "Notifications" },
{ id: "gear", type: 'ib', icon: "gear", label: "Settings" },
{ id: "person", type: 'ib', icon: "person", label: "Account" }
]);
Custom Theme
Bar.registerTheme("ocean", {
color: {
text: {
normal: "#dbdbdb",
markup: "#858585",
},
bar: {
background: "#05043e",
outline: "#3c3c3c",
},
tip: {
background: "#05043e",
},
tool: {
active: "#30305a",
hover: "#30305a",
}
},
size: {
bar: {
padding: 12,
},
tool: {
button: 40,
icon: 22,
radius: 8,
},
tip: {
offset: 20,
}
}
})
const bar = new Bar({ iconBaseUrl: "../../assets/icon" })
.bindTo(container)
.load(config);
bar.theme = 'ocean';
Style reference: https://codepen.io/havardob/details/qBjbQya
Custom Component
const bar = new Bar({ iconBaseUrl: "assets/icon" })
.bindTo(container)
.load([
{
id: "dark", type: 'iw', icons: [
{ "key": "on", "icon": "moon", "label": "On" },
{ "key": "off", "icon": "sun", "label": "Off" }
], label: "Dark Mode", current: "off"
},
]);
bar.get('dark').addEventListener('click', (e) => {
bar.theme = (bar.theme === 'light') ?'dark':'light'
})
Components
\<Base>
Every component can/should be passed in these parameters:
id: string // Unique identifier
type: string // Alias of component
tag: string = "li" // Default tag name
class: string = "" // Class names appended to tool class
label: string = ""
sublabel: string = ""
disabled: boolean = false
Divider
A vertical line.
type
aliases: '|', 'd', 'divider', 'Divider'
Props
height: string | number = "40%"
margin: string | number = 20
Spacer
A horizontal empty space.
type
aliases: '-', 's', 'spacer', 'Spacer'
Props
width: string | number = 20
Icon Button
A button with an icon in the center.
type
aliases: 'ib', 'icon-button', 'IconButton'
Props
icon: string
Events
- click
Icon Counter
Icon + Counter.
type
aliases: 'ic', 'icon-counter', 'IconCounter'
Props
icon: string
min: number
max: number
value: number
Events
- input
- change
Icon Counter 2
Icon + 2 Counters.
type
aliases: 'ic2', 'icon-counter2', 'IconCounter2'
Props
icon: string
label: string
min1: number
max1: number
value1: number
label1: string
min2: number
max2: number
value2: number
label1: string
Events
- input
- change
Icon Scroller
Scroll to switch icon.
type
aliases: 'is', 'icon-scroller', 'IconScroller'
Props
icon: {key: string, icon: string, label: string}[]
current: string // Current key
circle: boolean = false
Events
- input
- change
IconSwitcher
Click to change state.
type
aliases: 'iw', 'icon-switcher', 'IconSwitcher'
Props
icon: {key: string, icon: string, label: string}[]
current: string // Current key
Events
- change
Event handling
Listen events on one tool
bar.get('save').addEventListener('click', (e) => {
console.log(e.detail);
})
Listen events on all tools
bar.addEventListener("input", callback);
Demo
Check out a working demo here.
Things you can do
Click or scroll on the button on the top.
See events been captured in the left bottom section.
Edit the configuration json and click the "Run" button to see how it renders to buttons.
And MOST importantly, DO click the "Dark Mode" button on top right 😎.
Use your SVG icons
NOTE: SVG file downloaded from vector icon websites (or exported from vector graphing software) CANNOT be directly used in this project.
Check out this gist for why and how.
Features on the way
- Tooltip positioning
- Tool id uniqueness check
- Generate from HTML tags
- Integrate common icon packs
- Text Buttons and input box
- React & Vuejs wrapper
Change log
0.1
Sep 7, 2021. First commit!
Dev preparation
Download Akar Icon svgs into assets/icon_ori
.
Run python normalize_svg.py ./assets/icon_ori -o ./assets/icon
.
yarn install
yarn run dev
# Open 'demo/index.html' in Live Server
# (vscode: ritwickdey.liveserver)
Acknowledgements
@awmleer for answering a critical question in the project.
Akar Icons for perfect icons used in the demo.
Online Ascii Tools for generating cool logo for the project.
Author
John Theo (@John-Theo)
License
MIT License, Copyright © 2021-present John Theo.