Sprites.Ui.Scroll
Scrolling regions that clip their contents and grow a scrollbar.
Sprites.Ui.Scroll.Vertical Element
Sprites.Ui.Scroll.Vertical(build)
A region that scrolls up and down. It fills the remaining height of a flex column and clips the sides, so a tall list scrolls while a button row below it stays put. It shrinks to its parent, min height zero, and grows a scrollbar rather than pushing its siblings out of the window.
| Input | Type | Description |
|---|---|---|
build | Function | Builds the region's contents. |
Returns the scroll region element.
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Dom.Style('display', 'flex');
Sprites.Ui.Dom.Style('flex-direction', 'column');
Sprites.Ui.Dom.Style('border', '1px solid var(--border)');
Sprites.Ui.Scroll.Vertical(() => {
Sprites.Ui.Content.Area(() => {
for (let i = 1; i <= 30; i++) {
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Text('Row ' + i);
});
}
});
});
});Sprites.Ui.Scroll.Horizontal Element
Sprites.Ui.Scroll.Horizontal(build)
A region that scrolls left and right. It clips the top and bottom and shrinks inside a flex row, min width zero, so a strip of cards wider than the window scrolls sideways. The build is usually a row, so its children line up along the scroll axis.
| Input | Type | Description |
|---|---|---|
build | Function | Builds the region's contents. |
Returns the scroll region element.
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('width', '320px');
Sprites.Ui.Dom.Style('display', 'flex');
Sprites.Ui.Dom.Style('border', '1px solid var(--border)');
Sprites.Ui.Scroll.Horizontal(() => {
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('display', 'flex');
Sprites.Ui.Dom.Style('flex-direction', 'row');
for (let i = 1; i <= 30; i++) {
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('flex', '0 0 auto');
Sprites.Ui.Dom.Style('width', '80px');
Sprites.Ui.Dom.Style('padding', '0.5em');
Sprites.Ui.Dom.Text('Card ' + i);
});
}
});
});
});Sprites.Ui.Scroll.Both Element
Sprites.Ui.Scroll.Both(build)
A region that scrolls both ways, for content wider and taller than the window. It fills the remaining space of a flex parent and clips to it, min height and min width zero, growing scrollbars on either axis as needed.
| Input | Type | Description |
|---|---|---|
build | Function | Builds the region's contents. |
Returns the scroll region element.
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('width', '320px');
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Dom.Style('display', 'flex');
Sprites.Ui.Dom.Style('border', '1px solid var(--border)');
Sprites.Ui.Scroll.Both(() => {
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('display', 'grid');
Sprites.Ui.Dom.Style('grid-template-columns', 'repeat(10, 80px)');
for (let i = 1; i <= 100; i++) {
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Style('padding', '0.5em');
Sprites.Ui.Dom.Text('Cell ' + i);
});
}
});
});
});