Class “Popover”
Object > NativeObject > Popup > Popover
An Popover represents a modal ui container that is shown above the apps content. It provides the root element of a new layout hierarchy in the form of its contentView property. User provided widgets can be attached to the contentView similarly to the tabris.contentView. In order to close the Popover the close() method can be used.
The appearance of the Popover depends on the device size: On larger devices (like tablets) the Popover is shown as a floating window whereas on smaller devices it is shown as a fullscreen sheet covering the entire app.
| Type: | Popover extends Popup |
| Constructor: | public |
| Singleton: | No |
| Namespace: | tabris |
| Direct subclasses: | None |
| JSX Support: | Element: <Popover/>Parent Elements: Not supported Child Elements: Not Supported |
Examples
JavaScript
import {Popover, TextView} from 'tabris';
const popover = new Popover();
popover.contentView.append(new TextView({text: 'Hello Popover'}));
popover.open();
See also:
JSX Creating a Popover containing a NavigationView [► Run in Playground]
Constructor
new Popover(properties?)
| Parameter | Type | Description |
|---|---|---|
| properties | Properties<Popover> |
Sets all key-value pairs in the properties object on the Popover. Optional. |
Static Methods
open(popover)
Makes the given popover visible. Meant to be used with inline-JSX. In TypeScript it also casts the given JSX element from any to an actual Popover.
| Parameter | Type | Description |
|---|---|---|
| popover | Popover |
The popover to open |
Returns: Popover
Properties
anchor
iOS
An anchor Widget the Popover should attach to. When the anchor is given the Popover is positioned next to the anchor Widget and provides a visual indication of its relation. When omitted the Popover is positioned centered on the screen.
| Type: | Widget |
| Settable: | Yes |
| Change Event: | anchorChanged |
contentView
The root widget element containing all children of Popover.
| Type: | ContentView |
| Default: | ContentView |
| Settable: | No |
| Change Event: | Not supported |
This property can only be set via constructor or JSX. Once set, it cannot change anymore.
height
The height of the Popover when shown in windowed mode on large screen devices. Will be a platform specific default if set to null.
| Type: | Dimension |
| Default: | null |
| Settable: | Yes |
| Change Event: | heightChanged |
width
The width of the Popover when shown in windowed mode on large screen devices. Will be a platform specific default if set to null.
| Type: | Dimension |
| Default: | null |
| Settable: | Yes |
| Change Event: | widthChanged |
Events
close
Fired when the Popover was closed.
EventObject Type: EventObject<Popover>
This event has no additional parameter.
Change Events
widthChanged
Fired when the width property has changed.
EventObject Type: PropertyChangedEvent<Popover, Dimension>
| Property | Type | Description |
|---|---|---|
| value | Dimension |
The new value of width. |
heightChanged
Fired when the height property has changed.
EventObject Type: PropertyChangedEvent<Popover, Dimension>
| Property | Type | Description |
|---|---|---|
| value | Dimension |
The new value of height. |
anchorChanged
Fired when the anchor property has changed.
EventObject Type: PropertyChangedEvent<Popover, Widget>
| Property | Type | Description |
|---|---|---|
| value | Widget |
The new value of anchor. |
