Tesserae - IconToggle

IconToggle

Description

A group of icon buttons of which exactly one is selected at a time, like a segmented control. Each item carries a UIcons glyph, a tooltip and an arbitrary data payload, which is exposed through the typed Selected property.

Usage

icon-toggle-sample.cs

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

namespace Tesserae.Tests
{
    public enum ViewMode { List, Grid, Cards }

    internal static class App
    {
        private static void Main()
        {
            var toggle = IconToggle<ViewMode>(
                IconToggleItem(UIcons.List,  "List view",  ViewMode.List),
                IconToggleItem(UIcons.Apps,  "Grid view",  ViewMode.Grid),
                IconToggleItem(UIcons.Grid,  "Card view",  ViewMode.Cards)
            );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(toggle);
        }
    }
}

API reference

class

IconToggle<T>

public class IconToggle<T> : IComponent

A group of icon buttons of which exactly one is selected at a time, like a segmented control.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
IconToggle	Initializes a new instance of this class.

Constructor

IconToggle

public IconToggle(Item[] items)

Initializes a new instance of this class.

Methods

Name	Description
Render	Renders the component's root HTML element.
Select	Configures the component to select.
AsObservable	Returns the component's state as a(n) observable.

Method

IconToggle.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

IconToggle.Select

public void Select(T item)

Configures the component to select.

Method

IconToggle.AsObservable

public IObservable<T> AsObservable()

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

IconToggle

Description

Usage

API reference

Constructors

IconToggle

Methods

IconToggle.Render

IconToggle.Select

IconToggle.AsObservable

See also