Skip to content

small wrapper for creating Lumino-based user interfaces using TSX

License

Notifications You must be signed in to change notification settings

requirex/lumino-tsx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

lumino-tsx

This is a small wrapper for creating Lumino -based user interfaces using TSX.

Usage

/** @jsx jsx */
import { jsx, wrapTSX, Row, Col } from 'lumino-tsx';
import * as widgets from '@lumino/widgets';

const DockPanel = wrapTSX(widgets.DockPanel);
const Panel = wrapTSX(widgets.Panel);
const Widget = wrapTSX(widgets.Widget);

const app = <DockPanel id="main" spacing={4}>
	<Row>
		<Col flex={2}>
			<Panel flex={2} title='Green'>
				<Widget>
					<div style={{ background: '#27ae60' }} />
				</Widget>
			</Panel>
			<Panel title='Yellow'>
				<Widget>
					<div style={{ background: '#f1c40f' }} />
				</Widget>
			</Panel>
		</Col>
		<Panel flex={2} title='Red'>
			<Widget>
				<div style={{ background: '#e74c3c' }} />
			</Widget>
		</Panel>
		<Panel title='Blue'>
			<Widget>
				<div style={{ background: '#3498db' }} />
			</Widget>
		</Panel>
	</Row>
</DockPanel> as widgets.DockPanel;

Widget.attach(app, document.body);

License

CC0

About

small wrapper for creating Lumino-based user interfaces using TSX

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published