Inline Label

Description

One small fact on a line of them: an optional mark, followed by optional text

InlineLabel is a mark (a glyph, an image, or a rounded square of colour) followed by text. It is what an OmniResult footer is made of ("Box · 2.4 MB · Marie Lang · Apr 11, 2024"), and it reads the same wherever else a row of small facts is drawn.

Every combination is allowed: text alone, a mark alone, or both. Whatever the mark is, it is drawn at one size, so a line of labels stays on one baseline however each was built. A label sizes itself from where it is: a compact button on its own, small plain type inside a footer.

A label renders as an anchor, so SetHref produces a real link (middle-clickable, address in the status bar) and OnClick makes it pressable with its own tab stop, answering Enter and Space. A click stops at the label, so pressing it never also counts as a click on the row it sits in.

Self-removing labels

Built from a task, InlineLabel(async label => …) draws as a skeleton rectangle while the task runs. If the task ends without setting any text or mark, the label takes itself out of the document, along with the slot it was standing in: the stack item, the footer entry (separator dot included), or the whole DetailsGrid row when it was that row's only value. A line of facts therefore never keeps a gap for a lookup that came back empty.

Samples

Marks and text

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 component = HStack().Children(
                InlineLabel("Finance").SetIcon(UIcons.Folder),
                InlineLabel("2.4 MB"),
                InlineLabel("In review").SetColor(Theme.Colors.Orange500),
                InlineLabel("Open in Drive").SetHref("https://drive.google.com", openInNewTab: true));

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

A pressable label

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 component = InlineLabel("Marie Lang")
                .SetIcon(UIcons.User)
                .OnClick(label => Toast().Information(label.Text));

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

API reference

public sealed class InlineLabel : ComponentBase<InlineLabel, HTMLAnchorElement>

public InlineLabel(string text = null)

public InlineLabel(Func<InlineLabel, Task> load) : this((string)null)

public string Text { get; private set; }

private bool IsEmpty

public override HTMLElement Render()

public InlineLabel SetText(string text)

public InlineLabel SetIcon(UIcons icon, UIconsWeight weight = UIconsWeight.Regular, string color = null)

public InlineLabel SetIcon(IComponent iconOrImage)

public InlineLabel SetImage(string url)

public InlineLabel SetColor(string color)

public InlineLabel NoMark()

public InlineLabel SetHref(string href, bool openInNewTab = false)

public InlineLabel OnClick(Action<InlineLabel> onClick)

public override InlineLabel OnClick(ComponentEventHandler<InlineLabel, MouseEvent> onClick, bool clearPrevious = true)

private void RemoveWithItsSlot()

See also

• Omni Result — the row whose footer is a line of these.
• Details Grid — label/value rows that take these as values.
• Badge — a filled pill, when the fact needs more weight than a footer entry.
• Components overview