Skip to content

root-layout.md

Latest commit

 

History

History
251 lines (185 loc) · 4.66 KB

root-layout.md

File metadata and controls

251 lines (185 loc) · 4.66 KB
Raw
title RootLayout
description Layout container for dynamically layering views with a programmatic API.
contributors
NathanWalker
Ombuweb
rigor789

<RootLayout> is a layout container designed to be used as the primary RootLayout container for your app with a built-in API to easily control dynamic view layers. It extends a GridLayout so has all the features of a GridLayout, enhanced with additional APIs.

Examples

Using RootLayout to open dynamic popups

<RootLayout>
  <!-- main content -->
  <GridLayout>
    <Label
      verticalAlignment="center"
      textAlignment="center"
      text="Main content area"
    />
  </GridLayout>
</RootLayout>
import { createPopupView } from './helper'
// create a dynamic popup
const view = createPopupView('#65adf1', 110, -30)

::: code-group

// open the dynamic popup
getRootLayout()
  .open(view, {
    shadeCover: {
      color: '#000',
      opacity: 0.7,
      tapToClose: true,
    },
    animation: {
      enterFrom: {
        opacity: 0,
        translateY: 500,
        duration: 500,
      },
      exitTo: {
        opacity: 0,
        duration: 300,
      },
    },
  })
  .catch((ex) => console.error(ex))
// close the dynamic popup
getRootLayout()
  .close(view, {
    opacity: 0,
    translate: { x: 0, y: -500 },
  })
  .catch((ex) => console.error(ex))
// helper to create a popup view
export function createPopupView(
  color: string,
  size: number,
  offset: number,
): View {
  const layout = new StackLayout()
  layout.height = size
  layout.width = size
  layout.marginTop = offset
  layout.marginLeft = offset
  layout.backgroundColor = color
  layout.borderRadius = 10
  return layout
}

:::

API

getRootLayout()

import { getRootLayout } from '@nativescript/core'

const rootLayout: RootLayout = getRootLayout()

Returns the reference to the RootLayout, or undefined if there's no <RootLayout>.

::: danger RootLayout is designed to be used as a single instance Technically you can place multiple RootLayouts in your templates, but only the last created instance will be accessible via the getRootLayout method. The API has been designed to control a single instance, usually placed as the root view of your Application. :::

Methods

open()

open(view: View, options?: RootLayoutOptions): Promise<void>

Opens the view and brings it to the front by default.

See View, RootLayoutOptions.

bringToFront()

bringToFront(view: View, animated?: boolean): Promise<void>

Brings the view to the front if it's not already. If the view is not currently shown inside the RootLayout, the call is ignored.

See View.

close()

close(view: View, exitTo?: TransitionAnimation): Promise<void>

See View, TransitionAnimation.

closeAll()

closeAll(): Promise<void>

Closes all views.

getShadeCover()

getShadeCover(): View

Returns the shade cover (overlay view).

RootLayoutOptions {#rootLayoutOptions}

shadeCover

shadeCover: ShadeCoverOptions

See ShadeCoverOptions.

animation

animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom is only applied if it's the first one to be opened.

exitFrom is only applied if it's the last one to be closed

See TransitionAnimation.

ShadeCoverOptions {#shadeCoverOptions}

opacity

opacity: number

color

color: Color

Sets the color of the shade cover.

See Color.

tapToClose

tapToClose: boolean

Allows closing by tapping on the shade cover.

animation

animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom is only applied if it's the first one to be opened.

exitFrom is only applied if it's the last one to be closed

See TransitionAnimation.

ignoreShadeRestore

ignoreShadeRestore: boolean

TransitionAnimation {#transitionAnimation}

interface TransitionAnimation {
  translateX?: number
  translateY?: number
  scaleX?: number
  scaleY?: number
  rotate?: number // degrees
  opacity?: number
  duration?: number // in ms
  curve?: CoreTypes.AnimationCurve
}

See CoreTypes.AnimationCurve.