Sliver Example App

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.

Your text: Reversed: Loading ...


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.

Loading ...

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 just some text. Click the button above to see the table again.

This is also OneButtonSwitcher, with different CSS. The button is the borderless wedge-expander at the upper left:

Here is a card with show/hide of its contents

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.

The quick brown fox jumped over the lazy dogs.
Few black taxis drive up major roads on quiet, hazy nights.
While making deep excavations we found some quaint bronze jewelry.

This is also NButtonSwitcher with different CSS, implementing a tabbed look:

 
  • Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam.
  • Convallis posuere morbi leo urna molestie at elementum eu facilisis.
  • Sit amet consectetur adipiscing elit.
  • Augue mauris augue neque gravida.
  • Vel pharetra vel turpis nunc eget lorem dolor sed viverra.
  • Fermentum posuere urna nec tincidunt praesent semper.
  • Sapien pellentesque habitant morbi tristique senectus et netus et.
  • Consectetur adipiscing elit ut aliquam purus sit amet. Eget egestas purus viverra accumsan in nisl nisi.
  • Ullamcorper morbi tincidunt ornare massa eget egestas.
  • Massa enim nec dui nunc mattis.
  • Orci eu lobortis elementum nibh.
  • Sit amet mauris commodo quis.
  • Aliquet risus feugiat in ante metus.
  • Ornare arcu odio ut sem.
  • Auctor elit sed vulputate mi sit amet mauris.
  • Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.
  • Vitae tortor condimentum lacinia quis vel eros donec ac.

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.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2

Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus.

Section 3

Sed vulputate mi sit amet mauris.

Section 4

Ut tellus elementum sagittis vitae et leo duis ut.


Modals

This is a pop-up or modal, implemented using Sliver’s Button and GenericElement.

Font comparison

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.

Font 1

Hamburgevons. The quick brown fox jumped over the lazy dogs.

HAMBURGEVONS. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOGS.

Font 2

Hamburgevons. The quick brown fox jumped over the lazy dogs.

HAMBURGEVONS. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOGS.


RangeSlider


RangeFloatSlider


LightDarkThemeSlider

Loading ...


Source and documentation

Please see https://github.com/johnkerl/sliver