Tesserae - Inline Pagination

Inline Pagination

Description

The compact "‹ 3 of 7 ›" control

InlinePagination is a chevron either side of where you are in a set, inside one rounded pill. Use it for stepping through things one at a time (the result open in a preview, the photo in a lightbox, the record in an editor) beside other commands in a toolbar or a header, where Pagination's row of numbered page buttons would be too much.

Each chevron is enabled by having a handler: OnPrevious and OnNext. Leaving one out greys its chevron, which is how the first and the last of a set say so. The position and count only write the label, so a set that loads more as it goes stays in charge of when there is a next.

SetLabel replaces the counted label with text of your own ("Page 3", "March", the name of the thing you are on), and SetFormat changes how the position and count are written, for another language or for "3 / 7". SetTooltips names each chevron for a screen reader.

Samples

Stepping through a set

inline-pagination-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var pager = InlinePagination(3, 7).SetTooltips("Previous result", "Next result");

            pager
               .OnPrevious(p => p.SetPosition(p.Position - 1, p.Count))
               .OnNext(p => p.SetPosition(p.Position + 1, p.Count));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(pager.Padding(16.px()));
        }
    }
}

A custom label and format

inline-pagination-format-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var slashed = InlinePagination(2, 5)
               .SetFormat((position, count) => position + " / " + count)
               .OnPrevious(p => p.SetPosition(p.Position - 1, p.Count))
               .OnNext(p => p.SetPosition(p.Position + 1, p.Count));

            var named = InlinePagination()
               .SetLabel("March")
               .OnNext(p => p.SetLabel("April"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(HStack().Children(slashed, named).Padding(16.px()));
        }
    }
}

API reference

class

InlinePagination

public sealed class InlinePagination : ComponentBase<InlinePagination, HTMLElement>

The compact "‹ 3 of 7 ›" control: a chevron either side of where you are in a set, inside one rounded pill. It is for stepping through things one at a time - the result open in a preview, the photo in a lightbox, the record in an editor - beside other commands in a toolbar or a header, where Pagination's row of numbered page buttons would be far too much. Each chevron is enabled by having a handler: OnPrevious and OnNext. Leaving one out greys its chevron, which is how the first and the last of a set say so - the position and count only write the label, so a set that loads more as it goes stays in charge of when there is a next.

Namespace: Tesserae
Inheritance: ComponentBase<InlinePagination, HTMLElement> → InlinePagination

Constructors

Name	Description
InlinePagination	Initializes a new instance of this class showing the given position in the given count, both 1-based. A count of zero leaves the label out and the control is the two chevrons alone.

Constructor

InlinePagination

public InlinePagination(int position = 0, int count = 0)

Initializes a new instance of this class showing the given position in the given count, both 1-based. A count of zero leaves the label out and the control is the two chevrons alone.

Properties

Name	Description
Position	Gets or sets where in the set the control says you are, 1-based.
Count	Gets or sets how many there are in the set. Zero leaves the label out.
CanGoPrevious	Returns a value indicating whether the previous chevron is enabled.
CanGoNext	Returns a value indicating whether the next chevron is enabled.

Property

InlinePagination.Position

public int Position { get ; set ; }

Gets or sets where in the set the control says you are, 1-based.

Property

InlinePagination.Count

public int Count { get ; set ; }

Gets or sets how many there are in the set. Zero leaves the label out.

Property

InlinePagination.CanGoPrevious

public bool CanGoPrevious

Returns a value indicating whether the previous chevron is enabled.

Property

InlinePagination.CanGoNext

public bool CanGoNext

Returns a value indicating whether the next chevron is enabled.

Methods

Name	Description
Render	Renders the component's root HTML element.
SetPosition	Sets where in the set the control says you are, and how many there are - both 1-based. A count of zero (or a position past it) leaves the label out, so a set whose size isn't known yet shows the chevrons alone rather than a label that would have to lie.
SetLabel	Puts the given text between the chevrons in place of the position and count - "Page 3", "March", the name of the thing you are on. Pass null to go back to the counted label.
SetFormat	Changes how the position and the count are written - for another language, or for "3 / 7".
OnPrevious	Registers what the previous chevron does, and enables it. Pass null to grey it out - which is how the first of a set says it is the first.
OnNext	Registers what the next chevron does, and enables it. Pass null to grey it out.
SetTooltips	Sets what each chevron is called for a screen reader and in its tooltip - "Previous result" and "Next result" rather than the bare "Previous" and "Next" they carry by default.

Method

InlinePagination.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

InlinePagination.SetPosition

public InlinePagination SetPosition(int position, int count)

Sets where in the set the control says you are, and how many there are - both 1-based. A count of zero (or a position past it) leaves the label out, so a set whose size isn't known yet shows the chevrons alone rather than a label that would have to lie.

Method

InlinePagination.SetLabel

public InlinePagination SetLabel(string text)

Puts the given text between the chevrons in place of the position and count - "Page 3", "March", the name of the thing you are on. Pass null to go back to the counted label.

Method

InlinePagination.SetFormat

public InlinePagination SetFormat(Func<int, int, string> format)

Changes how the position and the count are written - for another language, or for "3 / 7".

Method

InlinePagination.OnPrevious

public InlinePagination OnPrevious(Action<InlinePagination> onPrevious)

Registers what the previous chevron does, and enables it. Pass null to grey it out - which is how the first of a set says it is the first.

Method

InlinePagination.OnNext

public InlinePagination OnNext(Action<InlinePagination> onNext)

Registers what the next chevron does, and enables it. Pass null to grey it out.

Method

InlinePagination.SetTooltips

public InlinePagination SetTooltips(string previous, string next)

Sets what each chevron is called for a screen reader and in its tooltip - "Previous result" and "Next result" rather than the bare "Previous" and "Next" they carry by default.

Inline Pagination

Description

Samples

Stepping through a set

A custom label and format

API reference

Constructors

InlinePagination

Properties

InlinePagination.Position

InlinePagination.Count

InlinePagination.CanGoPrevious

InlinePagination.CanGoNext

Methods

InlinePagination.Render

InlinePagination.SetPosition

InlinePagination.SetLabel

InlinePagination.SetFormat

InlinePagination.OnPrevious

InlinePagination.OnNext

InlinePagination.SetTooltips

See also