Skip to content
BlazorUI

Utilities

LongPress

Bit.BlazorUIPressAndHoldTapAndHold

BitLongPress raises an event when its content is pressed and held: a touch, a pen or a mouse button kept down in place for a moment, or the context-menu keys of the keyboard. It is what a touch screen has for a secondary action where a desktop has the right-click - a context menu on iOS, which never raises one on its own, an item's options, a preview.

Notes

A press is called off when the pointer moves further than MoveTolerance, when the page scrolls under it, when a second finger comes down and when it is released before Delay; nothing is taken from the browser, so the content still scrolls and zooms. A press that was long swallows the click its release would make, and a touch held on the content brings up neither the text selection nor the callout of the browser. While a press is held the root carries the bit-lpr-prs class. Turn on KeyboardTrigger for the keyboard's long press (WCAG 2.2 SC 2.1.1): Shift+F10 and the Menu key, the keys that bring up a context menu.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Press and hold inside the box - with a finger, a pen or the mouse. OnLongPress reports the point the press was held at and the PointerType that held it.

Press and hold here

Long presses: 0
Last:

Context menu

A BitContextMenu opens on a right-click, which iOS never raises for a long press. Opening it at the point OnLongPress reports gives every touch screen the same menu.

Right-click, or press and hold here

Clicked item:

Click and long press

The content keeps its own click. A tap on the button clicks it; a long press on it raises OnLongPress instead, and the click its release would make is swallowed.


Last:

Delay & tolerance

Delay is how long a press is held, 500ms by default. MoveTolerance is how far the pointer may drift while it is held, 10px by default; a press that moves further is a scroll or a drag, and is called off.

Hold for 1.5 seconds
Hold, and drift up to 40px
Last:

Touch only

TouchOnly leaves the mouse out: a mouse button held down does nothing, while a finger or a pen still long-presses. On a desktop, the right-click is the mouse's secondary action already.

Press and hold with a finger or a pen

Held by:

Keyboard

KeyboardTrigger makes the long press a tab stop whose context-menu keys - Shift+F10 and the Menu key - raise OnLongPress, at the middle of what has the focus and with a PointerType of "keyboard". Give it an AriaLabel that says what the press does.

Tab here, then press Shift+F10

Last:

Disabled

A disabled long press raises nothing, and leaves the tab order.

Holding here does nothing

Style & Class

The bit-lpr-prs class the root carries while a press is held is the hook for feedback: here the box sinks under the finger and fills up over the delay. --bit-LongPress-focus-color colors the focus ring of a KeyboardTrigger long press.

Press and hold here

Long presses: 0

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitLongPress CSS variables

Name Default value Description
--bit-LongPress-focus-color --bit-clr-pri-focus Focus ring color of a KeyboardTrigger long press.

API

Every parameter, public member, sub-class and enum this component exposes.

BitLongPress parameters

Name Type Default value Description
ChildContent RenderFragment? null The content the press is held on.
Delay int? null The time in milliseconds a press has to be held before it is a long press. Defaults to 500.
KeyboardTrigger bool false Makes the long press a tab stop whose context-menu keys - Shift+F10 and the Menu key - raise OnLongPress, at the middle of the element that has the focus and with a PointerType of "keyboard". The keys are named in aria-keyshortcuts, and are left alone on a field being typed in.
MoveTolerance decimal? null How far in pixels the pointer may move while it is held before the press is called off. Defaults to 10.
OnLongPress EventCallback<BitLongPressEventArgs> The callback for when a press has been held for the Delay, or the context-menu keys of KeyboardTrigger are pressed.
TouchOnly bool false Leaves the mouse out: only a touch or a pen is held, and a mouse button held down does nothing.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitLongPressEventArgs properties

Name Type Default value Description
ClientX double The horizontal point the press was held at, in pixels relative to the viewport: where the pointer went down, or the middle of the focused element for the keyboard. It is what a menu opened at a point is given (BitContextMenu.OpenAt).
ClientY double The vertical point the press was held at, in pixels relative to the viewport.
PointerType string What held the press: "touch", "pen", "mouse", or "keyboard" for the keys of KeyboardTrigger.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.