tom/Datastar_Meetup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

little fixes

Browse Source
This commit is contained in:
thomashamburg 2025-10-31 22:34:37 +01:00
parent 1a23b54513
commit 87ad7db0e6
2 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
hypermedia/2-example/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypermedia</title>
<title>Signals</title>
<link rel="stylesheet" href="pico.blue.css">
<meta name="color-scheme" content="light dark">
<script type="module" src="datastar.js"></script>
@ -12,59 +12,55 @@
<body class="container" data-theme="light">
<h1 style="margin-top: 1em; text-align:center">Signals</h1>
<h1 style="margin-top: 1em; text-align:center">Datastar Signals</h1>
<main class="grid" data-theme="dark">
<article id="record" data-init="@get('record1.json')" data-signals:recordnumber="1">
<article data-init="@get('record1.json')" data-signals:recordnumber="1">
<header>
<h3 data-text="$name"></h3>
<p></p>
<h3 style="margin: 1em;" data-text="$name"></h3>
</header>
<form>
<div class="form-group" >
<label for="username">username</label>
<label for="username">Username</label>
<input type="username" id="username" data-bind:username>
</div>
<div class="form-group" >
<label for="email">Email</label>
<input type="email" id="email" data-bind:email>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" data-bind:phone>
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" id="street" data-bind:street>
</div>
<div class="form-group">
<label for="suite">Suite</label>
<input type="text" id="suite" data-bind:suite>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" data-bind:city>
</div>
<div class="form-group">
<label for="zipcode">Zipcode</label>
<input type="text" id="zipcode" data-bind:zipcode>
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" id="website" data-bind:website>
</div>
</form>
<footer class="grid">
<button class="primary" data-attr:disabled="$recordnumber <= 1" data-on:click="@get(`record${$recordnumber - 1}.json`); $recordnumber--">Previous</button>
<button class="primary" data-attr:disabled="$recordnumber >= 6" data-on:click="@get(`record${$recordnumber + 1}.json`) ; $recordnumber++">Next</button>
<button class="primary" data-attr:disabled="$recordnumber <= 1"
data-on:click="@get(`record${$recordnumber - 1}.json`); $recordnumber--">
Previous
</button>
<button class="primary" data-attr:disabled="$recordnumber >= 6"
data-on:click="@get(`record${$recordnumber + 1}.json`) ; $recordnumber++">
Next
</button>
</footer>
</article>
</main>
<pre data-json-signals></pre>
</body>
</html>

10
hypermedia/2-example/recordx.json Normal file
View File

@ -0,0 +1,10 @@
{
"username": "SofiaChen",
"email": "sofia.c@cloudnet.org",
"street": "Maple Avenue",
"suite": "Suite 210",
"city": "Oakridge",
"zipcode": "45678-9012",
"phone": "555-987-6543 x2156",
"website": "sofiachen.dev"
}