lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
62 lines (58 loc) • 1.87 kB
HTML
<html>
<head>
<template id="audiostream">
<p>${name}</p>
<p>
Play: <input type="checkbox" value="${run}">
</p>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
self.variables({
run: "boolean"
}, {reactive});
self.variables({
name: "string"
}, {
imported
});
addEventListener("change", ({
variableName,
value
}) => {
if (variableName === "run" && value === true) {
self.siblings.forEach((sibling) => {
sibling.setVariableValue(variableName, false);
})
}
});
}
</script>
</template>
<title>Lightview:Examples:XOR</title>
<script src="../../lightview.js"></script>
<script>
Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))
</script>
</head>
<body>
<div style="margin:20px">
<table>
<th>
<td colspan="3">Audio Streams</td>
</th>
<tr>
<td style="width:33%;text-align:center">
<x-audiostream name="Classical"></x-audiostream>
</td>
<td style="width:33%;text-align:center">
<x-audiostream name="Country"></x-audiostream>
</td>
<td style="width:33%;text-align:center">
<x-audiostream name="Classic Rock"></x-audiostream>
</td>
</tr>
</table>
</div>
</body>
</html>