flutter/examples/htmlish/framework/htmlish.sky

113 lines
2.2 KiB
Plaintext

SKY MODULE - exports some basic HTML-like elements
<import src="element.sky"/>
<!-- note: accessibility handling is not implemented yet, because the
mojo ax service isn't yet ready -->
<import src="scrollable-block.sky">
<element name=html>
<style>
:host { display: scrollable-block; }
</style>
</element>
<element name=head />
<element name=body />
<element name=p />
<element name=h1>
<style>
:host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
</style>
</element>
<element name=h2>
<style>
:host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
</style>
</element>
<element name=h3>
<style>
:host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
</style>
</element>
<element name=h4>
<style>
:host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
</style>
</element>
<element name=h5>
<style>
:host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
</style>
</element>
<element name=h6>
<style>
:host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
</style>
</element>
<element name=b>
<style>
:host { font-weight: bold; }
</style>
</element>
<element name=data>
<script>
module.currentScript.parentNode.setPrototype({
get value () {
return this.getAttribute('value');
},
set value (newValue) {
this.setAttribute('value', newValue);
},
});
</script>
</element>
<element name=progress>
<template>
<div> ... </div>
</template>
<script>
module.currentScript.parentNode.setPrototype({
...
});
</script>
</element>
<element name=details>
<style>
:host { display: block; }
.outer { border: solid; }
.header { display: inline; }
.summary { display: inline; }
</style>
<template>
<div class="outer">
<div class="header">
<div class="button">OPEN</div>
<div class="summary"><content select="summary"/></div>
</div>
<div class="contents">
<content/>
</div>
</div>
</template>
<script>
module.currentScript.parentNode.setPrototype({
init: function () {
},
open() {
}
});
</script>
</element>