Sprites.Ui.Content

Paragraphs, titles, sections and content areas.

Sprites.Ui.Content

Sprites.Ui.Content.Area Element

Sprites.Ui.Content.Area(build)

A padded content area with the layout gaps restored. In a flush window it sets its own padding, and stacked areas show a dividing line at the window edges.

InputTypeDescription
buildFunctionBuilds the content inside the area.

Returns the area element.

Sprites.Ui.Content.Area(() => {
  Sprites.Ui.Content.Text('A padded area, inset with the layout gap.');
  Sprites.Ui.Content.Text('It holds a run of content.');
});
A padded area holding a run of content.

Sprites.Ui.Content.Section Element

Sprites.Ui.Content.Section(build)

A section that groups a title and its content. Sections nest, and a Title inside picks its heading level from the depth.

InputTypeDescription
buildFunctionBuilds the section's title and content.

Returns the section element.

Sprites.Ui.Content.Title('Reference');
Sprites.Ui.Content.Section(() => {
  Sprites.Ui.Content.Title('Colours');
  Sprites.Ui.Content.Text('Pick a colour for the sprite.');
});
Sprites.Ui.Content.Section(() => {
  Sprites.Ui.Content.Title('Shapes');
  Sprites.Ui.Content.Text('Choose a brush shape.');
  Sprites.Ui.Content.Section(() => {
    Sprites.Ui.Content.Title('Round');
    Sprites.Ui.Content.Text('A soft round brush.');
  });
  Sprites.Ui.Content.Section(() => {
    Sprites.Ui.Content.Title('Square');
    Sprites.Ui.Content.Text('A hard square brush.');
  });
});
A title, then sections with their own title and text, one holding subsections. Each title takes its heading level from the nesting.

Sprites.Ui.Content.Text Element

Sprites.Ui.Content.Text(...parts)

A paragraph of text, from one or more parts joined as one run, each constant or reactive.

InputTypeDescription
partsString, Number, Sprites.Reactive.Value or FunctionOne or more parts, joined as one run. Reactive parts stay live.

Returns the paragraph element.

Sprites.Ui.Content.Text('A paragraph of text.');
Sprites.Ui.Content.Text('It joins its parts: ', 'one', ' and ', 'two', '.');
Paragraphs, one joined from several parts.

Sprites.Ui.Content.Title Element

Sprites.Ui.Content.Title(...parts)

A heading for a section. Its level follows the section nesting, h1 with no section around it, h2 inside one, h3 inside two, up to h6, so it sits at the right depth in the page outline. Takes one or more parts joined as one run, each constant or reactive.

InputTypeDescription
partsString, Number, Sprites.Reactive.Value or FunctionOne or more parts, joined as one run. Reactive parts stay live.

Returns the heading element.

Sprites.Ui.Content.Title('Top title');
Sprites.Ui.Content.Section(() => {
  Sprites.Ui.Content.Title('Section title');
  Sprites.Ui.Content.Section(() => {
    Sprites.Ui.Content.Title('Subsection title');
  });
});
The heading level follows the section nesting: h1, then h2, then h3.