ui kit
Gothicbook
A tiny design system demo for the installable gothic UI package.
Button
Usage
<ui.Button label="Save changes" primary={ true } onclick={ nil } />Card
A simple card
Cards group related content with a small surface.
Usage
<ui.Card title="Card title" body="Card body" />Slots
A pure component supplies layout while the App keeps state and events in the slotted content.
Hello, friend!
Usage
<ui.Field label="Your name">\n\t<input value={ model.Name } ... />\n</ui.Field>Tabs
Select the third tab, then remove a tab. The component clamps its active index from the items prop.
Usage
<ui.Tabs items={ model.Tabs } active={ model.TabStart } />Accordion
Usage
<ui.Accordion items={ model.Accordion } />Conditionals
An if branch renders one panel or the other. Toggling removes the unused branch from the DOM, so stateful components start fresh when the branch returns. Expand the disclosure, hide it, then show it again.
Stateful lists
Ten disclosures per page in a scrollable viewport. Paging removes the old items, so expanded rows start collapsed when they return.
Showing 1-10 of 20
Usage
<ui.Disclosure key={ item.ID } item={ item } />Virtualized list
One thousand rows, with only the visible window in the DOM. Scroll inside the list to move the window.
Usage
<ui.VirtualList items={ model.VirtualRows } height={ 432 } rowheight={ 36 } row={ VirtualRow } />Client and server state
Increment on client stays inside the component. Increment on server emits a message to the app, which runs a procedure.
Server count:12
Usage
<ui.Button label="Increment" onclick={ IncrementClicked{} } />