softwaretailoring / Wheelnav
Licence: mit
Animated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
Stars: ✭ 661
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Wheelnav
Evil Icons
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN
Stars: ✭ 4,944 (+647.96%)
Mutual labels: svg
Reanimate
Haskell library for building declarative animations based on SVG graphics
Stars: ✭ 581 (-12.1%)
Mutual labels: svg
Svg Inject
A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.
Stars: ✭ 559 (-15.43%)
Mutual labels: svg
React Native Svg Transformer
Import SVG files in your React Native project the same way that you would in a Web application.
Stars: ✭ 568 (-14.07%)
Mutual labels: svg
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (-9.98%)
Mutual labels: svg
People You Should Follow On Codepen
People You Should Follow on CodePen
Stars: ✭ 542 (-18%)
Mutual labels: svg
Quick Media
media(audio/image/qrcode/markdown/html/svg) support web service (多媒体编辑服务, 酷炫二维码, 音频, 图片, svg, markdown, html渲染服务支持)
Stars: ✭ 612 (-7.41%)
Mutual labels: svg
React Svg Loader
A loader for webpack, rollup, babel that loads svg as a React Component
Stars: ✭ 570 (-13.77%)
Mutual labels: svg
Vue Svg Icon
a solution for multicolor svg icons in vue2.0 (vue2.0的可变彩色svg图标方案)
Stars: ✭ 553 (-16.34%)
Mutual labels: svg
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (-17.85%)
Mutual labels: svg
Macaw
Powerful and easy-to-use vector graphics Swift library with SVG support
Stars: ✭ 5,756 (+770.8%)
Mutual labels: svg
Alphatab
alphaTab is a cross platform music notation and guitar tablature rendering library.
Stars: ✭ 647 (-2.12%)
Mutual labels: svg
Libvips
A fast image processing library with low memory needs.
Stars: ✭ 6,094 (+821.94%)
Mutual labels: svg
wheelnav.js
Animated wheel navigation JavaScript library based on modified Raphaël.js (SVG/VML).
It works on all major desktop and mobile browser.
Possible uses:
- tab navigation
- pie menu (radial menu, circular menu)
- sub menu
- option button
- checkboxes
- and more...
For more insight please visit https://wheelnavjs.softwaretailoring.net
Demos are available on CodePen
You can find answers on StackOverflow and GitHub issues
Using
Via JavaScript
HTML
<div id="divWheelnav"></div>
JS
var myWheelnav = new wheelnav("divWheelnav");
myWheelnav.slicePathFunction = slicePath().WheelSlice;
myWheelnav.colors = colorpalette.parrot;
myWheelnav.createWheel([icon.smile, icon.star, icon.fork, icon.$]);
Via data attributes
HTML
<div id="divWheelnav" data-wheelnav data-wheelnav-slicepath="WheelSlice" data-wheelnav-colors="#D80351,#F5D908,#00A3EE,#929292">
<div data-wheelnav-navitemicon="smile">smile</div>
<div data-wheelnav-navitemicon="star">star</div>
<div data-wheelnav-navitemicon="fork">fork</div>
<div data-wheelnav-navitemicon="$">donate</div>
</div>
JS
var myWheelnav = new wheelnav("divWheelnav");
The index.html of this repo (test page) is available here.
Install
wheelnav.js is available over npm
$ npm install wheelnav
and bower
$ bower install wheelnav
or CDN by jsDelivr
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/dist/raphael.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/dist/wheelnav.min.js"></script>
Author
Developer: Gábor Berkesi ([email protected])
Development environment: Visual Studio Community 2019
License
Licensed under MIT. Enjoy the spinning.
Buy me a beer - if you want to keep in spinning. Thanks a lot!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].