2.2.1 • Published 5 years ago
design-het-widget v2.2.1
design-het-widget
Interactive web widget for Design Week 2019 - Budapest
Demo
http://brigittaforrai.com/design-het-widget/
Install
npm install design-het-widget --saveImport widget
Import widget into index.html or use javascript import
<!-- load widget bundle, which includes all the necessary dependencies -->
<head>
<script src="node_modules/design-het-widget/dist/design-het-widget.min.js"></script>
</head>import 'node_modules/design-het-widget/dist/design-het-widget.min.js'Add components
<body>
<!-- Use the two components together -->
<design-het music-url="path/to/music.mp3" style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -100;"></design-het>
<design-het-interface></design-het-interface>
</body>Attributes
design-het-interface:
disable-download:
- default: false
<design-het-interface disable-download="true"></design-het-interface>design-het:
music-url:
<design-het music-url="music.mp3"></design-het>circles:
- Number of bigger circle groups
- Fallback value: 1
- Max value: 3
<design-het circles="3" ></design-het>Polyfill
Add webcomponents polyfill to support older browsers. https://www.webcomponents.org/polyfills
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>or
npm install @webcomponents/webcomponentsjs