Navigation Section¶
The Navigation Section is positioned below the Title Bar, above the plugin screen and contains buttons that route to other screens or toggle the data presented.
The sample below shows an example of breadcrumbs navigation (left) and forward / next and back / previous buttons (right).
The Navigation Section serves as primary navigation routes for the active plugin.
If a Navigation Section is required it is constructed by the plugin screen.
Navigation Types:
- Breadcrumbs
- Pagination
- forward and / or back, next and / or previous
The buttons remain a fixed size throughout a responsive lifecycle. The buttons are sized around the text they contain.
Note
The buttons require a different theme to the Title Bar and generic peek theme buttons.
Classes¶
The .peek-nav-section
class contains the looks classes specific to the
Navigation Section.
//Peek navigation section .peek-nav-section { /* Contains the Navigation Section attributes */ ... .btn-group { /* Contains the attributes unique to the Navigation Section */ ... .nav-section-btn { /* Contains the Button attributes unique to the Navigation Section */ ... &:hover { /* pseudo-selectors are not supported in NativeScript */ ... } &:last-child { /* pseudo-selectors are not supported in NativeScript */ ... } &:first-child { /* pseudo-selectors are not supported in NativeScript */ ... } &:first-child:last-child { /* pseudo-selectors are not supported in NativeScript */ ... } &:disabled { /* pseudo-selectors are not supported in NativeScript */ ... } } .nav-section-btn-divider { /* Contains the button divider attributes unique to the Navigation Section */ ... } .nav-section-btn-disabled { /* Contains the button disabled attributes unique to the Navigation Section */ ... } } } .peek-nav-bar-padding { /* Provides padding for the screen under the Navigation Section */ ... }
SCSS Files¶
The Navigation Section style classes are found in the
_navigation_section.scss
.
The Navigation Section HTML layout classes are found in the
_navigation_section.web.scss
.
The Navigation Section NativeScript layout classes are found in the
_navigation_section.ns.scss
.
HTML¶
The peek-nav-section
is to be included before the code of the plugin screen
requiring the Nav Bar.
The nav-section-btn-divider
and nav-section-btn-disabled
classes are not required in the Web app.
Their attributes are handled by pseudo-selectors of nav-section-btn
.
<div class="peek-nav-section" *ngIf="!confirmDialogShown()"> <!-- The following 'div' groups button to the left of the Nav Bar. Can contain one to many buttons --> <div class="btn-group" role="group"> <Button class="nav-section-btn" role="group" (click)="navToMyJobs()"> My Jobs </Button> <Button class="nav-section-btn" role="group" (click)="navToJob()"> Job </Button> <Button class="nav-section-btn" role="group" (click)="navToOperations()"> Operations </Button> </div> <!-- The following 'div' groups button to the right of the Nav Bar. Can contain one to many buttons --> <div class="btn-group pull-right" role="group"> <button class="nav-section-btn" role="group" [disabled]="!lastOperationEnabled()" (click)="navToLastOperation()"> <fa name="arrow-left"></fa> </button> <button class="nav-section-btn" role="group" [disabled]="!nextOperationEnabled()" (click)="navToNextOperation()"> <fa name="arrow-right"></fa> </button> <!-- CONFIRM THE OPERATION --> <Button class="nav-section-btn" *ngIf="confirmEnabled()" (click)="confirmOp()"> Confirm </Button> </div> </div> <div class="peek-nav-bar-padding"> <!-- This div provides padding for the screen under the Navigation Section --> </div>
NativeScript¶
The peek-nav-section
is to be included before the code of the plugin screen
requiring the Nav Bar.
The nav-section-btn-divider
and nav-section-btn-disabled
classes are required in the
NativeScript app. Pseudo-selectors applied in the SCSS are not supported by NativeScript.
nav-section-btn-divider
will set the right side border of the button.
nav-section-btn-disabled
applies the disabled styling.
<GridLayout class="peek-nav-section" rows="auto" columns="auto, *, auto" *ngIf="!confirmDialogShown()"> <GridLayout class="btn-group" rows="auto" columns="auto, auto, auto, auto" row="0" col="0"> <Button class="nav-section-btn nav-section-btn-divider" row="0" col="0" text="My Jobs" (tap)="navToMyJobs()"></Button> <Button class="nav-section-btn nav-section-btn-divider" row="0" col="1" text="Job" (tap)="navToJob()"></Button> <Button class="nav-section-btn nav-section-btn-divider" row="0" col="2" text="Operations" (tap)="navToOperations()"></Button> </GridLayout> <GridLayout class="btn-group" rows="auto" columns="auto, auto" row="0" col="2"> <Button class="nav-section-btn nav-section-btn-divider" row="0" col="0" [text]="Confirm" *ngIf="confirmEnabled()" (tap)="confirmOp()"></Button> <Button class="nav-section-btn nav-section-btn-divider fa" [class.nav-section-btn-disabled]="!lastOperationEnabled()" row="0" col="1" text="{{'fa-arrow-left' | fonticon }} " (tap)="navToLastOperation()"></Button> <Button class="nav-section-btn fa" [class.nav-section-btn-disabled]="!nextOperationEnabled()" row="0" col="2" text="{{'fa-arrow-right' | fonticon }} " (tap)="navToNextOperation()"></Button> </GridLayout> </GridLayout> <StackLayout class="hr"></StackLayout>