projects/datastar/README.md
The following samples show how to use Datastar hypermedia framework using .NET 10 and pico CSS framework.
Use data-on-load attribute with @get action to receive SSE event from a Minimal API endpoint that returns datastar-patch-elements SSE event type.
This sample demonstrates how the backend can patch signals through SSE and how the UI reacts with it. The sample adds 3 seconds delays on the SSE response so the changes on the UI is visible.
Similar to previous sample except this time we add an extra signal and did not initialize any of the them.
This sample shows how to use filterSignals option to only send specific signals to the backend.
This sample shows the backend add one extra signal to be used for later action at the UI.
This example shows how to use data-attr to set HTML attribute to an expression. This sample demonstrates the usage of direct value, object and also signal expression.
This sample shows how to use data-bind to bind input (text, textarea, select, radio, checkbox, range) values to signals.
This example shows how to add or remove a class to or from an element based on an expression using data-class.
This example shows to create a read only signal that is computed based on expression.
This example shows to use data-effect to update other signals or perform operations.
This example shows to use data-on-click to update other signals or perform operations.
This example shows to use data-on-{custom-event} to handle custom even on three different occasion, local event, bubbling event, and event handle attached to window.
This example shows to use data-on-interval to run expression at regular time. It defaults to one second.
This example shows to use data-show to run expression to hide or show an element.
This example shows how to set inline CSS style using data-style.
This sample shows how to use data-indicator to create a singal set to true while an SSE request is in flight.
This sample shows how to use data-on-signal-patch to run an expression whether one or more signals are patched. patch variable is available and contains the details of the patched signals.
This sample shows how to use data-on-signal-patch-filter together with data-on-signal-patch to run an expression whether one or more specific signal patched. patch variable is available and contains the details of the patched signals.
This example shows to use data-ignore to tell Datastar to skip an element and its descendants.
This example shows to use data-ref to obtain a reference to the HTML element itself.