Frame

This is an overview of the most common usage of Frame. For more information about the available properties, methods, or events, head over to the complete API documentation for Frame.

<Frame> is a UI component used to display <Page> elements. Every app needs at least a single <Frame> element, usually set as the root element.


A single root Frame

If you are migrating from nativescript 3.x and want to preserve the old behavior, the following snippet in your entry file will create a root frame and render your default page.

new Vue({
  render: h => h('Frame', [ h(HomePageComponent) ])
})

Multiple Frames

If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side

<GridLayout columns="*, *">
  <Frame col="0"/>
  <Frame col="1"/>
</GridLayout>

A frame with a default page

<Frame>
  <Page>
    <ActionBar title="Default Page Title" />
    <GridLayout>
      <Label text="Default Page Content" />
    </GridLayout>
  </Page>
</Frame>

A frame with a default page from an external component

<Frame>
  <Page>
    <Home />
  </Page>
</Frame>
import Home from './Home'

export default {
  components: {
    Home
  }
}

Native component

AndroidiOS
org.nativescript.widgets.ContentLayoutUINavigationController
Contributors