Class: BgImgTouchButton

A touchscreen button which uses different images for its "up" state and "down" state backgrounds and displays an optional label.

The root element of the button contains the bg-img-touch-button CSS class by default, in addition to all root-element classes used by TouchButton, with the exception of touch-button itself.

The root element contains optional child <img> elements with the CSS classes bg-img-touch-button-up-img and bg-img-touch-button-down-img as well as an optional label element with the CSS class bg-img-touch-button-label.

Hierarchy

• TouchButton<BgImgTouchButtonProps>

  ↳ BgImgTouchButton

Constructors

constructor

• new BgImgTouchButton(props): BgImgTouchButton

Creates an instance of a DisplayComponent.

Parameters

Name	Type	Description
props	BgImgTouchButtonProps	The propertis of the component.

Returns

BgImgTouchButton

Inherited from

TouchButton.constructor

Defined in

sdk/components/FSComponent.ts:73

Properties

context

• Optional context: [] = undefined

The context on this component, if any.

Inherited from

TouchButton.context

Defined in

sdk/components/FSComponent.ts:64

---

contextType

• Optional Readonly contextType: readonly [] = undefined

The type of context for this component, if any.

Inherited from

TouchButton.contextType

Defined in

sdk/components/FSComponent.ts:67

---

cssClassSet

• Protected Readonly cssClassSet: SetSubject<string>

Overrides

TouchButton.cssClassSet

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:34

---

cssClassSub

• Protected Optional cssClassSub: Subscription

Inherited from

TouchButton.cssClassSub

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:241

---

currentMousePosition

• Protected Readonly currentMousePosition: Vec2

Inherited from

TouchButton.currentMousePosition

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:244

---

downImgSrc

• Protected Readonly downImgSrc: undefined | MappedSubscribable<string>

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:39

---

dragThresholdPxActual

• Protected Readonly dragThresholdPxActual: number

Inherited from

TouchButton.dragThresholdPxActual

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:248

---

focusOnDrag

• Protected Readonly focusOnDrag: boolean

Inherited from

TouchButton.focusOnDrag

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:246

---

holdTickInterval

• Protected holdTickInterval: null | Timer = null

Inherited from

TouchButton.holdTickInterval

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:210

---

holdTimeSinceLastPress

• Protected holdTimeSinceLastPress: number = 0

Inherited from

TouchButton.holdTimeSinceLastPress

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:213

---

inhibitOnDrag

• Protected Readonly inhibitOnDrag: boolean

Inherited from

TouchButton.inhibitOnDrag

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:247

---

inhibitOnDragAxisActual

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

Inherited from

TouchButton.inhibitOnDragAxisActual

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:249

---

isEnabled

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

Inherited from

TouchButton.isEnabled

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:199

---

isEnabledSub

• Protected Optional isEnabledSub: Subscription

Inherited from

TouchButton.isEnabledSub

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:238

---

isHeld

• Protected isHeld: boolean = false

Inherited from

TouchButton.isHeld

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:208

---

isHighlighted

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

Inherited from

TouchButton.isHighlighted

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:200

---

isHighlightedSub

• Protected Optional isHighlightedSub: Subscription

Inherited from

TouchButton.isHighlightedSub

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:239

---

isPrimed

• Protected isPrimed: boolean = false

Inherited from

TouchButton.isPrimed

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:207

---

isVisible

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

Inherited from

TouchButton.isVisible

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:201

---

isVisibleSub

• Protected Optional isVisibleSub: Subscription

Inherited from

TouchButton.isVisibleSub

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:240

---

labelContent

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

Inherited from

TouchButton.labelContent

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:203

---

lastHoldTickTime

• Protected lastHoldTickTime: undefined | number = undefined

Inherited from

TouchButton.lastHoldTickTime

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:211

---

mouseClickPosition

• Protected Readonly mouseClickPosition: Vec2

Inherited from

TouchButton.mouseClickPosition

Defined in

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

Inherited from

TouchButton.mouseDownListener

Defined in

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

Inherited from

TouchButton.mouseLeaveListener

Defined in

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

Inherited from

TouchButton.mouseMoveListener

Defined in

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

Inherited from

TouchButton.mouseUpListener

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:195

---

props

• props: BgImgTouchButtonProps & ComponentProps

The properties of the component.

Inherited from

TouchButton.props

Defined in

sdk/components/FSComponent.ts:61

---

rootRef

• Protected Readonly rootRef: NodeReference<HTMLDivElement>

Inherited from

TouchButton.rootRef

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:190

---

totalHoldTime

• Protected totalHoldTime: number = 0

Inherited from

TouchButton.totalHoldTime

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:212

---

upImgSrc

• Protected Readonly upImgSrc: undefined | MappedSubscribable<string>

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:36

---

RESERVED_CSS_CLASSES

▪ Static Protected Readonly RESERVED_CSS_CLASSES: Set<string>

Overrides

TouchButton.RESERVED_CSS_CLASSES

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:25

Methods

destroy

▸ destroy(): void

Returns

void

Inherit Doc

Overrides

TouchButton.destroy

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:68

---

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

TouchButton.getContext

Defined in

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.

Inherited from

TouchButton.getDragDistance

Defined in

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.

Inherited from

TouchButton.getReservedCssClasses

Defined in

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.

Inherited from

TouchButton.getRootElement

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:293

---

holdTickFunc

▸ holdTickFunc(): void

Returns

void

Inherited from

TouchButton.holdTickFunc

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:215

---

onAfterRender

▸ onAfterRender(node): void

Parameters

Name	Type
node	VNode

Returns

void

Inherit Doc

Inherited from

TouchButton.onAfterRender

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:253

---

onBeforeRender

▸ onBeforeRender(): void

A callback that is called before the component is rendered.

Returns

void

Inherited from

TouchButton.onBeforeRender

Defined in

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

Inherited from

TouchButton.onMouseDown

Defined in

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

Inherited from

TouchButton.onMouseLeave

Defined in

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

Inherited from

TouchButton.onMouseMove

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:460

---

onMouseUp

▸ onMouseUp(): void

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

Returns

void

Inherited from

TouchButton.onMouseUp

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:426

---

onPressed

▸ onPressed(): void

Responds to when this button is pressed.

Returns

void

Inherited from

TouchButton.onPressed

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:498

---

render

▸ render(): VNode

Returns

VNode

Inherit Doc

Overrides

TouchButton.render

Defined in

garminsdk/components/touchbutton/BgImgTouchButton.tsx:43

---

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.

Inherited from

TouchButton.renderLabel

Defined in

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

Inherited from

TouchButton.setHeld

Defined in

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

Inherited from

TouchButton.setPrimed

Defined in

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

Inherited from

TouchButton.simulatePressed

Defined in

garminsdk/components/touchbutton/TouchButton.tsx:302