Welcome to 98ts Demo
This is a demo page for the 98ts TypeScript UI library.
Intro
98ts is a TypeScript library for building user interfaces that mimic the look and feel of Windows 98. It provides a set of components that can be used to create applications with a retro aesthetic.
Components
Button
A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it.
A standard button measures 75px wide and 23px tall, with a raised outer and inner border. They are given 12px of horizontal padding by default.
Show code
Checkbox
A check box represents an independent or non-exclusive choice.
Show code
OptionButton
An option button, also referred to as a radio button, represents a single choice within a limited set of mutually exclusive choices. That is, the user can choose only one set of options.
98ts provides a simple way to create option buttons using the OptionButtonGroup class.
Show code
GroupBox
A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls.
Show code
GroupBox
A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls.
Show code
TextBox
A text box (also referred to as an edit control) is a rectangular control where the user enters or edits text. It can be defined to support a single line or multiple lines of text.
This example shows a simple text box with a label to the left.
Show code
Labels can also be placed above the text box with the FieldRow component set to stacked.
Show code
Slider
A slider, sometimes called a trackbar control, consists of a bar that defines the extent or range of the adjustment and an indicator that shows the current value for the control...
Show code
Sliders can also have a Block indicator and be vertical.
Show code
Dropdown
A drop-down list box allows the selection of only a single item from a list. In its closed state, the control displays the current value for the control. The user opens the list to change the value.
Show code
By default the first option will be selected. You can change the default selection by setting the
value property on the Dropdown component.
Show code
Window
Here is a simple window. It can be resized and moved around.
Show code
This is a window that can not be resized.
Show code
Windows can also be locked in place by setting the static property to true.
Show code
Window Manager
The WindowManager is responsible for managing a collection of windows within a
container. It automatically handled the z-index and positioning of the windows and
child windows.
Show code
Menu
Show code
StatusBar
A status bar is a special area within a window, typically the bottom, that displays information about the current state of what is being viewed in the window or any other contextual information, such as keyboard state.
Show code
TreeView
A tree view control is a special list box control that displays a set of objects as an indented outline based on their logical hierarchical relationship.
Show code
Tabs
A tab control is analogous to a divider in a file cabinet or notebook. You can use this control to define multiple logical pages or sections of information within the same window.
Show code
Tabs can also span multiple rows if needed.
Note: The appearance of selected tabs not on the bottom row look bad. This is a problem in 98.css
Show code
Table View
Basic table view. You'll probably want to add on extra features yourself like sorting, inline editing, etc.
Show code
Progress Indicator
You can use a progress indicator, also known as a progress bar control, to show the percentage of completion of a lengthy operation.