Tesserae - Drawer

Drawer

Description

Drawer is a sheet that slides up from the bottom of the screen over a dimmed page, with a grab handle, a title with a close button, a scrolling content area and an optional footer. It is as tall as its content, up to 85% of the screen, and on screens wider than 768px it stays a 640px column in the middle. The user closes it by dragging the handle down, tapping outside it, or using the close button.

Use it for lists and short tasks on phones, where a Panel or a Modal would cover the whole screen. An existing modal can be shown as a drawer on mobile with Modal.DrawerOnMobile() instead of being rebuilt.

Usage

Create a drawer with Drawer(title), set its content with .Content(...) and an optional footer with .SetFooter(...), then call .Show().

drawer-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
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 list = VStack().WS();

            for (var i = 1; i <= 12; i++)
            {
                list.Add(Button("Search the workspace, call " + i).SetIcon(UIcons.Search).WS().TextLeft().NoBorder().NoBackground());
            }

            var drawer = Drawer("Used 12 tools").Content(list);

            var withFooter = Drawer("Share")
               .Content(TextBlock("A drawer can carry a footer below its scrolling content.").Wrap());

            withFooter.SetFooter(HStack().JustifyContent(ItemJustify.End).Children(
                    Button("Cancel").OnClick(() => withFooter.Hide()),
                    Button("Share").Primary().OnClick(() => withFooter.Hide())));

            var component = HStack().Children(
                Button("Open drawer").OnClick(() => drawer.Show()),
                Button("Open drawer with footer").OnClick(() => withFooter.Show()));

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

Other options: .MaxHeight(...) caps the height, .FullHeight() keeps it at the full height for content that grows while open, .NoLightDismiss() and .NoDragToDismiss() turn off the two ways of closing it, and .NoHeader() leaves only the handle.

API reference

class

Drawer

public sealed class Drawer : Layer<Drawer>, IHasBackgroundColor, IBindableComponent<bool>

A sheet that slides up from the bottom of the screen over a dimmed page - the phone's answer to a Panel or a Modal. It has a grab handle, an optional title with a close button, a scrolling content area and an optional footer, and it can be dragged down to dismiss.

Remarks

A Modal that should become one of these on a phone does not need rebuilding: DrawerOnMobile renders the same modal inside a drawer while the page is in mobile mode.

Namespace: Tesserae
Inheritance: Layer<Drawer> → Drawer
Implements: IHasBackgroundColor, IBindableComponent<bool>

Constructors

Name	Description
Drawer	Initializes a new instance of this class.

Constructor

Drawer

Overload
Drawer(string)	Initializes a new instance of this class.
Drawer(IComponent)	Initializes a new instance of this class.

Drawer(string)

public Drawer(string title = null) : this(string.IsNullOrEmpty(title) ? null : TextBlock(title).SemiBold())

Initializes a new instance of this class.

Parameters

title string

Drawer(IComponent)

public Drawer(IComponent title)

Initializes a new instance of this class.

Parameters

title IComponent

Properties

Name	Description
Content	Sets the content rendered inside the sheet.
Footer	Gets or sets the footer of the sheet, drawn below the scrolling content.
CanLightDismiss	Gets or sets whether tapping the dimmed page around the sheet closes it. True by default: a sheet is something the reader looks at and puts away.
ShowCloseButton	Gets or sets whether the close button is shown.
Background	Gets or sets the CSS background of the sheet.
LocksPageScroll	A drawer blocks the page behind it.
CanDragToDismiss	Gets or sets whether pulling the sheet down by its handle dismisses it. True by default.
IsOpen	Gets whether the sheet is on screen and not on its way out.

Property

Drawer.Content

public override IComponent Content { get ; set ; }

Sets the content rendered inside the sheet.

Property

Drawer.CanLightDismiss

public bool CanLightDismiss { get ; set ; }

Gets or sets whether tapping the dimmed page around the sheet closes it. True by default: a sheet is something the reader looks at and puts away.

Property

Drawer.ShowCloseButton

public bool ShowCloseButton { get ; set ; }

Gets or sets whether the close button is shown.

Property

Drawer.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the sheet.

Property

Drawer.LocksPageScroll

protected override bool LocksPageScroll

A drawer blocks the page behind it.

Property

Drawer.CanDragToDismiss

public bool CanDragToDismiss { get ; set ; }

Gets or sets whether pulling the sheet down by its handle dismisses it. True by default.

Property

Drawer.IsOpen

public bool IsOpen

Gets whether the sheet is on screen and not on its way out.

Methods

Name	Description
SetTitle	Sets the title shown beside the close button. Null leaves the header with only the button.
SetFooter	Sets the footer of the sheet.
MaxHeight	Caps the sheet's height, as a CSS size. It is 85% of the screen by default, so the page it covers is always still in sight above it; the sheet is otherwise as tall as its content.
FullHeight	Makes the sheet as tall as `MaxHeight` allows, whatever its content - for content that grows while it is open (a list still loading), which would otherwise make the sheet jump.
NoHeader	Leaves out the title row, for content that brings its own header - the sheet is then held by its handle alone.
NoContentPadding	Removes the padding around the content.
HideCloseButton	Hides the close button. The sheet can still be dragged down, and dismissed by tapping outside it.
LightDismiss	Enables light-dismiss behaviour (tapping outside the sheet closes it). On by default.
NoLightDismiss	Disables light-dismiss behaviour, for a sheet that asks for a decision.
NoDragToDismiss	Stops the sheet being dismissed by pulling it down, for one that asks for a decision.
OnHide	Registers a callback invoked when the sheet is hidden.
Show	Shows the sheet, sliding it up from the bottom.
Hide	Hides the sheet, sliding it back down.
AsObservable	Returns an observable that tracks the visibility of the sheet.
SetBoundValue	Programmatically shows or hides the sheet as part of a two-way binding.

Method

Drawer.SetTitle

Overload
SetTitle(IComponent)	Sets the title shown beside the close button. Null leaves the header with only the button.
SetTitle(string)	Sets the title shown beside the close button.

SetTitle(IComponent)

public Drawer SetTitle(IComponent title)

Sets the title shown beside the close button. Null leaves the header with only the button.

Parameters

title IComponent

SetTitle(string)

public Drawer SetTitle(string title)

Sets the title shown beside the close button.

Parameters

title string

Method

Drawer.SetFooter

public Drawer SetFooter(IComponent footer)

Sets the footer of the sheet.

Method

Drawer.MaxHeight

public Drawer MaxHeight(UnitSize height)

Caps the sheet's height, as a CSS size. It is 85% of the screen by default, so the page it covers is always still in sight above it; the sheet is otherwise as tall as its content.

Method

Drawer.FullHeight

public Drawer FullHeight()

Makes the sheet as tall as MaxHeight allows, whatever its content - for content that grows while it is open (a list still loading), which would otherwise make the sheet jump.

Method

Drawer.NoHeader

public Drawer NoHeader()

Leaves out the title row, for content that brings its own header - the sheet is then held by its handle alone.

Method

Drawer.NoContentPadding

public Drawer NoContentPadding()

Removes the padding around the content.

Method

Drawer.HideCloseButton

public Drawer HideCloseButton()

Hides the close button. The sheet can still be dragged down, and dismissed by tapping outside it.

Method

Drawer.LightDismiss

public Drawer LightDismiss()

Enables light-dismiss behaviour (tapping outside the sheet closes it). On by default.

Method

Drawer.NoLightDismiss

public Drawer NoLightDismiss()

Disables light-dismiss behaviour, for a sheet that asks for a decision.

Method

Drawer.NoDragToDismiss

public Drawer NoDragToDismiss()

Stops the sheet being dismissed by pulling it down, for one that asks for a decision.

Method

Drawer.OnHide

public Drawer OnHide(OnHideHandler onHide)

Registers a callback invoked when the sheet is hidden.

Method

Drawer.Show

public override Drawer Show()

Shows the sheet, sliding it up from the bottom.

Method

Drawer.Hide

public override void Hide(Action onHidden = null)

Hides the sheet, sliding it back down.

Method

Drawer.AsObservable

public IObservable<bool> AsObservable()

Returns an observable that tracks the visibility of the sheet.

Method

Drawer.SetBoundValue

public void SetBoundValue(bool value)

Programmatically shows or hides the sheet as part of a two-way binding.

Fields

Name	Description
DRAWER_TRANSITION_TIME	How long the sheet takes to slide in or out, in milliseconds. Kept in step with tss.drawer.css.
DRAG_TO_DISMISS_DISTANCE	How far the sheet has to be dragged down, in pixels, before letting go dismisses it.

Field

Drawer.DRAWER_TRANSITION_TIME

public const int DRAWER_TRANSITION_TIME = 250

How long the sheet takes to slide in or out, in milliseconds. Kept in step with tss.drawer.css.

Field

Drawer.DRAG_TO_DISMISS_DISTANCE

private const int DRAG_TO_DISMISS_DISTANCE = 80

How far the sheet has to be dragged down, in pixels, before letting go dismisses it.

Drawer

Description

Usage

API reference

Constructors

Drawer

Drawer(string)

Parameters

Drawer(IComponent)

Parameters

Properties

Drawer.Content

Drawer.Footer

Drawer.CanLightDismiss

Drawer.ShowCloseButton

Drawer.Background

Drawer.LocksPageScroll

Drawer.CanDragToDismiss

Drawer.IsOpen

Methods

Drawer.SetTitle

SetTitle(IComponent)

Parameters

SetTitle(string)

Parameters

Drawer.SetFooter

Drawer.MaxHeight

Drawer.FullHeight

Drawer.NoHeader

Drawer.NoContentPadding

Drawer.HideCloseButton

Drawer.LightDismiss

Drawer.NoLightDismiss

Drawer.NoDragToDismiss

Drawer.OnHide

Drawer.Show

Drawer.Hide

Drawer.AsObservable

Drawer.SetBoundValue

Fields

Drawer.DRAWER_TRANSITION_TIME

Drawer.DRAG_TO_DISMISS_DISTANCE

See also