nativescript-centered-label
NativeScript plugin that provide Label that are horizontally and vertically centered.
npm i --save nativescript-centered-label
  • Version: 1.0.0
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  0
    • Last Month: 0

NativeScript Centered Label

Demo IOS      Demo Android

This plugin allows you to have Label that are centered both vertically and horizontally

Demo apps

NativeScript-Core (XML)

Check out the demo folder. This is how to clone and run it:

git clone https://github.com/mhtghn/nativescript-centered-label
cd nativescript-centered-label/src
npm run demo.ios # or demo.android

NativeScript-Angular

Check out the demo-angular folder. This is how to clone and run it:

git clone https://github.com/mhtghn/nativescript-centered-label
cd nativescript-centered-label/src
npm run demo-angular.ios # or demo-angular.android

Installation

tns plugin add nativescript-centered-label

Usage

NativeScript-Core (XML)

<Page class="page"
navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ui="nativescript-centered-label">


<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout>
<!-- Add your page content here -->
<ui:CenteredLabel text="Centered Label" class="c-label"></ui:CenteredLabel>
</GridLayout>
</Page>

NativeScript Angular

TypeScript

...
import {CenteredLabelModule} from "nativescript-centered-label";

@NgModule({
imports: [
...
CenteredLabelModule
],
...
})
export class HomeModule { }

HTML

<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
<CenteredLabel text="Centered Label" class="c-label" (tap)="testTap()"></CenteredLabel>
</GridLayout>

CSS

.c-label{
background-color: rgba(0, 0, 0, 0.1);
border-width: 4;
border-color: #a8a8a8;
height: 20%;
width: 60%;
border-radius: 30;
color: black;
font-size: 20;
}