Skip to content

button.md

Latest commit

 

History

History
97 lines (68 loc) · 2.23 KB

button.md

File metadata and controls

97 lines (68 loc) · 2.23 KB
title Button
description A basic native button that reacts to user gestures.
contributors
rigor789
Ombuweb

<Button> is a UI component that displays a button which reacts to user gestures.

For more information about the available gestures, see Gestures.

<<< @/../examples/typescript/src/ui/Button/template.xml#example <<< @/../examples/angular/src/ui/Button/component.html#example <<< @/../examples/react/src/components/ui/button.tsx#example <<< @/../examples/solid/src/ui/button.tsx#example <<< @/../examples/svelte/app/components/ui/Button.svelte#example <<< @/../examples/vue/src/ui/Button/component.vue#example

Examples

Formatting text inside a Button

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

<Button>
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Button>

Props

text

text: string

Sets the text shown in the button.

textWrap

textWrap: boolean

Gets or sets whether the button should wrap longer text to new lines.

Default value is false.

isEnabled

isEnabled: boolean

Allows disabling the button. A disabled button does not react to user gestures.

Default value is true.

...Inherited

For additional inherited properties, refer to the API Reference.

Events

tap

on('tap', (args: TapGestureEventData) => {
  const button = args.object as Button
  console.log(`The button has been tapped!`)
})

Emitted when the button is tapped

See TapGestureEventData.

Native component