NativeScript 居中标签

此插件允许您拥有水平和垂直居中的标签。

演示应用

NativeScript-Core (XML)

查看 演示 文件夹。这是如何克隆和运行它的说明

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

NativeScript-Angular

查看 demo-angular 文件夹。这是如何克隆和运行它的说明

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

安装

tns plugin add nativescript-centered-label

用法

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;
}