https://github.com/themounthead/nativescript-ngx-partials--archive

Nativescript Angular Module for Page and Panel partials
https://github.com/themounthead/nativescript-ngx-partials--archive

angular layout-engine nativescript

Last synced: 19 days ago
JSON representation

Nativescript Angular Module for Page and Panel partials

• Host: GitHub
• URL: https://github.com/themounthead/nativescript-ngx-partials--archive
• Owner: themounthead
• License: mit
• Created: 2021-04-23T13:25:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-19T08:42:54.000Z (over 3 years ago)
• Last Synced: 2024-11-08T10:51:52.804Z (2 months ago)
• Topics: angular, layout-engine, nativescript
• Language: TypeScript
• Homepage:
• Size: 2.4 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Nativescript-Ngx-Partials

A Nativescript Angular module to quickly create Pages and Layout fragments

## Setup

`npm install nativescript-ngx-partials --save`

Import the module into your _app-module_ 

```

import { PartialsModule } from 'nativescript-ngx-partials';

```

## Getting Started

### Page

The page layout consists of a root tag and nested attribute containers:

- Page (root element)

- page-header

- page-content

- page-footer

- page-toolbar

The _Page_ has the following options:

- header=flow/float/fixed

- footert=flow/float/fixed

- toolbar=top-left/bottom-left (any combination of horizontal and vertical properties)

- debug (highlights the container elements)

### Panel

The Panel is a NativeScript Flex-box layout view that simplifies the process of nested elements by using row and column tags

> You can add the native Flexbox css styles to the Row/Col Panel 

### Row

#### RowPanel

The _RowPanel_ has the following nested containers:

- panel-left

- panel-middle

- panel-right

### Col

#### ColPanel

The _ColPanel_ has the following nested containers:

- panel-top

- panel-middle

- panel-bottom

# Examples

Provided in the demo app