Class: TouchButton<P>

A touchscreen button.

The root element of the button contains the touch-button CSS class by default. The root element also conditionally contains the touch-button-disabled, touch-button-primed, and touch-button-held classes when the button is disabled, primed, and held, respectively.

The root element optionally contains a child label element with the CSS class touch-button-label.

Type parameters

Name	Type
P	extends TouchButtonProps = TouchButtonProps

Hierarchy

• DisplayComponent<P>

  ↳ TouchButton

Constructors

constructor

• new TouchButton<P>(props): TouchButton<P>

Creates an instance of a DisplayComponent.

Type parameters

Name	Type
P	extends TouchButtonProps = TouchButtonProps

Parameters

Name	Type	Description
props	P	The propertis of the component.

Returns

TouchButton<P>

Inherited from

DisplayComponent<P>.constructor

Defined in

src/sdk/components/FSComponent.ts:73

Properties

context

• Optional context: [] = undefined

The context on this component, if any.

Inherited from

DisplayComponent.context

Defined in

src/sdk/components/FSComponent.ts:64

---

contextType

• Optional Readonly contextType: readonly [] = undefined

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType

Defined in

src/sdk/components/FSComponent.ts:67

---

cssClassSet

• Protected Readonly cssClassSet: SetSubject<string>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:192

---

cssClassSub

• Protected Optional cssClassSub: Subscription

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:241

---

currentMousePosition

• Protected Readonly currentMousePosition: Vec2

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:244

---

dragThresholdPxActual

• Protected Readonly dragThresholdPxActual: number

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:248

---

focusOnDrag

• Protected Readonly focusOnDrag: boolean

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:246

---

holdTickInterval

• Protected holdTickInterval: null | Timer = null

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:210

---

holdTimeSinceLastPress

• Protected holdTimeSinceLastPress: number = 0

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:213

---

inhibitOnDrag

• Protected Readonly inhibitOnDrag: boolean

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:247

---

inhibitOnDragAxisActual

• Protected Readonly inhibitOnDragAxisActual: "both" | "x" | "y"

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:249

---

isEnabled

• Protected Readonly isEnabled: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:199

---

isEnabledSub

• Protected Optional isEnabledSub: Subscription

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:238

---

isHeld

• Protected isHeld: boolean = false

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:208

---

isHighlighted

• Protected Readonly isHighlighted: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:200

---

isHighlightedSub

• Protected Optional isHighlightedSub: Subscription

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:239

---

isPrimed

• Protected isPrimed: boolean = false

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:207

---

isVisible

• Protected Readonly isVisible: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:201

---

isVisibleSub

• Protected Optional isVisibleSub: Subscription

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:240

---

labelContent

• Protected Readonly labelContent: undefined | string | VNode | MappedSubscribable<string>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:203

---

lastHoldTickTime

• Protected lastHoldTickTime: undefined | number = undefined

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:211

---

mouseClickPosition

• Protected Readonly mouseClickPosition: Vec2

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:243

---

mouseDownListener

• Protected Readonly mouseDownListener: (e: MouseEvent) => void

Type declaration

▸ (e): void

Responds to mouse down events on this button's root element.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:194

---

mouseLeaveListener

• Protected Readonly mouseLeaveListener: (e: MouseEvent) => void

Type declaration

▸ (e): void

Responds to mouse leave events on this button's root element.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:196

---

mouseMoveListener

• Protected Readonly mouseMoveListener: (e: MouseEvent) => void

Type declaration

▸ (e): void

Handle mouse moving after clicking.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:197

---

mouseUpListener

• Protected Readonly mouseUpListener: () => void

Type declaration

▸ (): void

Responds to mouse up events on this button's root element.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:195

---

props

• props: P & ComponentProps

The properties of the component.

Inherited from

DisplayComponent.props

Defined in

src/sdk/components/FSComponent.ts:61

---

rootRef

• Protected Readonly rootRef: NodeReference<HTMLDivElement>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:190

---

totalHoldTime

• Protected totalHoldTime: number = 0

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:212

---

RESERVED_CSS_CLASSES

▪ Static Protected Readonly RESERVED_CSS_CLASSES: Set<string>

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:181

Methods

destroy

▸ destroy(): void

Returns

void

Inherit Doc

Overrides

DisplayComponent.destroy

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:545

---

getContext

▸ getContext(context): never

Gets a context data subscription from the context collection.

Parameters

Name	Type	Description
context	never	The context to get the subscription for.

Returns

never

The requested context.

Throws

An error if no data for the specified context type could be found.

Inherited from

DisplayComponent.getContext

Defined in

src/sdk/components/FSComponent.ts:106

---

getDragDistance

▸ getDragDistance(): number

Get the distance that the mouse has been dragged on the correct axis.

Returns

number

The distance.

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:487

---

getReservedCssClasses

▸ getReservedCssClasses(): ReadonlySet<string>

Gets the CSS classes that are reserved for this button's root element.

Returns

ReadonlySet<string>

The CSS classes that are reserved for this button's root element.

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:540

---

getRootElement

▸ getRootElement(): HTMLElement

Gets this button's root HTML element.

Returns

HTMLElement

This button's root HTML element.

Throws

Error if this button has not yet been rendered.

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:293

---

holdTickFunc

▸ holdTickFunc(): void

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:215

---

onAfterRender

▸ onAfterRender(node): void

Parameters

Name	Type
node	VNode

Returns

void

Inherit Doc

Overrides

DisplayComponent.onAfterRender

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:253

---

onBeforeRender

▸ onBeforeRender(): void

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender

Defined in

src/sdk/components/FSComponent.ts:80

---

onMouseDown

▸ onMouseDown(e): void

Responds to mouse down events on this button's root element.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:390

---

onMouseLeave

▸ onMouseLeave(e): void

Responds to mouse leave events on this button's root element.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:439

---

onMouseMove

▸ onMouseMove(e): void

Handle mouse moving after clicking.

Parameters

Name	Type	Description
e	MouseEvent	The mouse event.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:460

---

onMouseUp

▸ onMouseUp(): void

Responds to mouse up events on this button's root element.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:426

---

onPressed

▸ onPressed(): void

Responds to when this button is pressed.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:498

---

render

▸ render(): VNode

Returns

VNode

Inherit Doc

Overrides

DisplayComponent.render

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:503

---

renderLabel

▸ renderLabel(): null | VNode

Renders this button's label.

Returns

null | VNode

This button's rendered label, or null if this button does not have a label.

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:526

---

setHeld

▸ setHeld(isHeld, endReason?): void

Sets the held state of this button.

Parameters

Name	Type	Default value	Description
isHeld	boolean	undefined	The new held state.
endReason	TouchButtonHoldEndReason	TouchButtonHoldEndReason.Unknown	The reason that the held state is set to false. Ignored if isHeld is true. Defaults to TouchButtonHoldEndReason.Unknown.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:342

---

setPrimed

▸ setPrimed(isPrimed): void

Sets the primed state of this button.

Parameters

Name	Type	Description
isPrimed	boolean	The new primed state.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:312

---

simulatePressed

▸ simulatePressed(ignoreDisabled?): void

Simulates this button being pressed. This will execute the onPressed() callback if one is defined.

Parameters

Name	Type	Default value	Description
ignoreDisabled	boolean	false	Whether to simulate the button being pressed regardless of whether the button is disabled. Defaults to false.

Returns

void

Defined in

src/garminsdk/components/touchbutton/TouchButton.tsx:302