Layouts and Containers

Complex layouts

Jeamlit provides several options for controlling how different elements are laid out on the screen.

Columns

Insert containers laid out as side-by-side columns.

var cols = Jt.columns(2).use();
Jt.text("This is column 1").use(cols.col(0));
Jt.text("This is column 2").use(cols.col(1));

Container

Insert a multi-element container.

var c = Jt.container().use();
Jt.text("This will show last").use();
Jt.text("This will show first").use(c);
Jt.text("This will show second").use(c);

Empty

Insert a single-element container.

var e = Jt.empty("my-empty").use();
Jt.text("This will show last").use();
Jt.text("This will be replaced").use(e);
Jt.text("This will show first").use(e);

Expander

Insert a multi-element container that can be expanded/collapsed.

var exp = Jt.expander("Open to see more").use();
Jt.text("This is more content").use(exp);

Popover

Insert a multi-element popover container that can be opened/closed.

var pop = Jt.popover("Settings").use();
Jt.checkbox("Show completed").use(pop);

Tabs

Insert containers separated into tabs.

var tabs = Jt.tabs(List.of("Tab 1", "Tab 2")).use();
Jt.text("This is tab 1").use(tabs.tab(0));
Jt.text("This is tab 2").use(tabs.tab(1));

Previous: Media elements Next: Jt.columns

forum

Still have questions?

Go to our discussions forum for helpful information and advice from Jeamlit experts.