Tesserae - Editable Label

EditableLabel

Description

EditableLabel is a UI component that displays text which can be clicked to switch into an inline editing mode. In this mode, users can modify the text content interactively. It is ideal for scenarios where information should appear as static text by default but offer an editing interface upon interaction. EditableLabel is part of the Components group and combines display and input behaviors, providing a seamless inline editing experience.

Usage

Instantiate an EditableLabel using the Tesserae.UI static helper. You can optionally provide the initial text value. When the label is clicked, it transforms into an input element allowing the user to edit the text. A save callback can be registered with the OnSave method to handle saving the new content.

Below is a sample usage:

editable-label-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sample = new EditableLabelExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class EditableLabelExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create an EditableLabel with initial text.
            var editableLabel = EditableLabel("Click to edit me")
                .OnSave((sender, newValue) =>
                {
                    // Here you can add validation or other processing.
                    console.log("New value: " + newValue);
                    // Return true to accept the change; return false to reject.
                    return true;
                });

            // Render the component.
            return editableLabel.Render();
        }
    }
}

Public Properties

Size
- Type: TextSize
- Gets or sets the text size for both the label and the input element. The size is applied by modifying the CSS classes.
Weight
- Type: TextWeight
- Gets or sets the font weight for the displayed text. Adjusts CSS classes to change the weight.
TextAlign
- Type: TextAlign
- Gets or sets the text alignment. Updates the class list of the input element.
IsEditingMode
- Type: bool
- Gets or sets the editing mode status. When true, the component displays the input element; when false, it shows the label view.

API reference

class

EditableLabel

public sealed class EditableLabel : ComponentBase<EditableLabel, HTMLInputElement>, ITextFormating, IObservableComponent<string>

An inline-editable single-line text surface that toggles between a read-only label and a textbox on click.

Constructors

Constructor

EditableLabel

public EditableLabel(string text = string.Empty)

Initializes a new instance of this class.

Properties

Property

EditableLabel.Size

public TextSize Size { get ; set ; }

Gets or sets the size of the component.

Property

EditableLabel.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the font weight of the component.

Property

EditableLabel.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment of the component.

Property

EditableLabel.IsEditingMode

public bool IsEditingMode { get ; set ; }

Returns a value indicating whether the component is editing mode.

Methods

Method

EditableLabel.OnSave

public EditableLabel OnSave(SaveEditHandler onSave)

Registers a callback invoked when the save event fires.

Method

EditableLabel.SetText

public EditableLabel SetText(string text)

Sets the text of the component.

Method

EditableLabel.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

EditableLabel.AsObservable

public IObservable<string> AsObservable()

Returns the component's state as a(n) observable.

Samples

Basic EditableLabel Usage

The following sample demonstrates how to create an EditableLabel, configure its appearance, and register an OnSave callback to process user inputs.

editable-label-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sample = new EditableLabelExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class EditableLabelExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create an EditableLabel with initial text.
            var editableLabel = EditableLabel("Editable label text");
            editableLabel.Size = TextSize.Large;
            editableLabel.Weight = TextWeight.Bold;
            editableLabel
                .OnSave((sender, newValue) =>
                {
                    // Validate new value; for example, ensure it's not empty.
                    if (string.IsNullOrWhiteSpace(newValue))
                    {
                        console.log("Value cannot be empty.");
                        return false; // Reject the change.
                    }
                    console.log("New text saved: " + newValue);
                    return true; // Accept the change.
                });

            // Render and attach the component to the document.
            return editableLabel.Render();
        }
    }
}

EditableLabel

Description

Usage

Public Properties

API reference

EditableLabel

Constructors

EditableLabel

Properties

EditableLabel.Size

EditableLabel.Weight

EditableLabel.TextAlign

EditableLabel.IsEditingMode

Methods

EditableLabel.OnSave

EditableLabel.SetText

EditableLabel.Render

EditableLabel.AsObservable

Samples

Basic EditableLabel Usage

See also

Referenced by