This is a sample application for the Sliver JavaScript library, which is a lark/DIY project.
TextInput, TextSpan
These use Sliver’s TextInput
and TextSpan
classes.
A Button
is connected to clear the former; events in the former are used to update
the latter.
setErrorWidget
Here we use Sliver’s setErrorWidget
which puts error text where it can be seen, on the
page, rather than being hidden in the Developer Console.
NButtonSelector
Here we use Sliver’s NButtonSelector
. This class ensures that selecting one button
deselects the other two. The action performed on button-click is an app-level callback: here, we
simply write a message to a TextSpan
.
OneButtonSwitcher
Here we use Sliver’s OneButtonSwitcher
. This controls two other elements.
Precisely one of the two is visible at once time. The nominal use is for a show/hide button.
Note that the two elements persist — only their visibility is toggled. In particular, you can
add rows to the table, hide it, then show it again, and its contents are still there.
This is also OneButtonSwitcher
, with different CSS. The button is the borderless
wedge-expander at the upper left:
NButtonSwitcher
Here we use Sliver’s NButtonSwitcher
. This like OneButtonSwitcher
,
except that you can have arbitrarily many elements, with only one being visible at a time. Each has its
own button.
This is also NButtonSwitcher
with different CSS, implementing a tabbed look:
A third example of NButtonSwitcher
, using buttons in a left-hand navbar, may be
found at https://johnkerl.org/doc/make/.
NButtonToggler
Here we use Sliver’s NButtonToggler
. This is like NButtonSwitcher
,
except that there are expand-all and collapse-all buttons, and, it's possible to have none of
the elements be visible: namely, by clicking the button for an element that’s currently visible.
I created this for https://johnkerl.org.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus.
Sed vulputate mi sit amet mauris.
Ut tellus elementum sagittis vitae et leo duis ut.
Button
and GenericElement
.
This is a bit of font fun. It uses Sliver’s TextInput
connect with
<fieldset>
and <datalist>
in the browser API. The app-level
callbacks on this page are set up to control font family, style, and weight for some sample text.
There are two such areas, so you can compare one against the other.
Please see https://github.com/johnkerl/sliver