@@ 1,8 1,16 @@
+<!-- This Component is specially commented to illustrate how Svelte works -->
+
<script lang="ts">
+ // We're declaring vars that can be passed as parameters to the component,
+ // in a manner like:
+ // <Checkbox id="T">
+ // where the variable `id' is set to "T".
+ // `class' is a reserved keyword in JS, so we call the variable `clazz` and
+ // export it as 'class' so we can still say <Checkbox class="whatever">.
let clazz: string = "";
export { clazz as class };
export let id = "";
- export let disabled = false;
+ export let disabled = false; // Boolean parameters have no content.
export let style = "";
export let title = "";
</script>
@@ 17,7 25,37 @@
{style}
{title} />
+<!--
+ Reviewing the above:
+
+<input This is the content of the component.
+ Well, technically it all is, but this
+ is actual HTML content.
+ type="checkbox" Fixed value. Not dynamic, always
+ applied. Works as you'd expect.
+ {id} This de-sugars to id="{id}", inlining
+ the value of the `id' variable for
+ {id}.
+ class="svcmp-Checkbox {clazz}" One static class, and other classes
+ passed are added also.
+ {disabled} {disabled} is inlined if `disabled` is
+ true. Otherwise, it is skipped.
+ on:click Listener bindings. Ask core.
+ on:focus "
+ {style} Same idea as {id} above.
+ {title} /> "
+
+-->
+
<style lang="scss">
+ /*
+ These styles are inlined as a part of the component.
+ Class and id names are mangled, but I try to keep them reasonable so that
+ the file is maintainable.
+ This sort of styling will replace the entire css/ directory eventually.
+ */
+
+
.svcmp-Checkbox {
appearance: none;
background: transparent;