4 ms·
Bee - A Collection of lightweight Dart Web UI Components
- mrspeaker 13y agoI don't know the dart Web UI package - but from the example code: <span on-click="query('.q-example-overlay').xtag.show()">Launch Overlay</span> <x-overlay width="600px" class="q-example-overlay"> Does that then get transpiled into valid HTML (and inline javascript?) or is that what's actually served to the browser?
- callahad 13y agoCheck out X-Tag: http://x-tags.org/ http://x-tags.org/
- nik-graf 13y agoSorry for the late reply. Right now there is a lot of stuff happening to simulate Web Components. Going forward they will become a W3C Standard and we can reduce the complexity. You might want to look at the current Draft https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/... What’s happening at the moment is that the output for <x-loading></x-loading> is: <span is="x-loading"> <style> @-webkit-keyframes x-loading-dot { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .x-loading-one { opacity: 1; -webkit-animation: x-loading-dot 1.3s infinite; -webkit-animation-delay: 0.0s; } .x-loading-two { opacity: 1; -webkit-animation: x-loading-dot 1.3s infinite; -webkit-animation-delay: 0.2s; } .x-loading-three { opacity: 1; -webkit-animation: x-loading-dot 1.3s infinite; -webkit-animation-delay: 0.3s; } </style> <span class="q-x-loading" style="color: rgb(80, 80, 80);"> <span class="x-loading-one">.</span><span class="x-loading-two">.</span><span class="x-loading-three">.</span> </span> </span> If a component like the overlay also contains logic the code will be added to your compiled and minified JavaScript output. For blossom.io/bee you can find the compiled output here https://www.blossom.io/bee_documentation.html_bootstrap.dart.js https://www.blossom.io/bee_documentation.html_bootstrap.dart...