nativeScript-mdc

NativeScript-MDC 使用官方 MDC 库为 iOS 和 Android 提供材料设计组件。

目前仅实现了以下组件

• 活动指示器
• 底部应用栏
• 底部导航
• 底部抽屉
• 按钮
• 卡片视图
• 对话框
• 浮动操作按钮
• 进度
• 波纹
• 滑块
• Snackbar
• 文本字段

感谢以下插件在构建此插件时提供参考： nativescript-bottom-navigation nativescript-cardview nativescript-floatingactionbutton nativescript-material-components

(可选) 先决条件/要求

您需要 NativeScript 版本 ^6.0.0 才能使用此插件。

安装

tns plugin add nativescript-mdc

用法

用法按组件进行。以下是一个使用底部导航的非常简单的示例，以概述如何使用这些组件。

XML

您可以使用 tabs 属性设置标签

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-mdc"
      loaded="pageLoaded"
      class="page">
    <GridLayout columns="*" rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigation
            tabs="{{ tabs }}"
            activeColor="blue"
            inactiveColor="red"
            loaded="bottomNavigationLoaded"
            titleVisibility="always"
            row="1">
        </mdc:BottomNavigation>
    </GridLayout>
</Page>

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from "nativescript-mdc";

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <pages.Page>args.object;
    page.bindingContext = {
        tabs: [
            new BottomNavigationTab('First', 'ic_home'),
            new BottomNavigationTab('Second', 'ic_view_list', null, false),
            new BottomNavigationTab('Third', 'ic_menu'),
            new BottomNavigationTab('Forth', 'ic_view_list', 'ic_menu')
        ]
    };
}

export function bottomNavigationLoaded(args) {
    let bottomNavigation: BottomNavigation = args.object;
    // For some reason the tabSelected event doesn't work if you
    // handle it from the view, so you need to handle the event in this way.
    bottomNavigation.on('tabSelected', tabSelected);
}

export function tabSelected(args: OnTabSelectedEventData) {
    console.log('tab selected ' + args.newIndex);
}

Angular

首先，您需要在 app.module.ts 中包含 NativeScriptMDCModule

import { NativeScriptMDCModule} from "nativescript-mdc/angular";

@NgModule({
    imports: [
        NativeScriptMDCModule
    ],
    ...
})

您可以直接在 html 中声明 BottomNavigationTabs

<GridLayout rows="*, auto">
    <StackLayout row="0">
       <Label text="content"></Label>
    </StackLayout>
    <BottomNavigation
        activeColor="red"
        inactiveColor="yellow"
        (tabSelected)="onBottomNavigationTabSelected($event)"
        titleVisibility="always"
        row="1">
        <BottomNavigationTab title="First" icon="ic_home"></BottomNavigationTab>
        <BottomNavigationTab title="Second" icon="ic_view_list" selectable="false"></BottomNavigationTab>
        <BottomNavigationTab title="Third" icon="ic_menu"></BottomNavigationTab>
        <BottomNavigationTab title="Forth" icon="ic_view_list" selectedIcon="ic_menu"></BottomNavigationTab>
    </BottomNavigation>
</GridLayout>

import { Component, OnInit } from '@angular/core';
import { OnTabSelectedEventData } from 'nativescript-mdc';

@Component(
  {
    selector: 'ns-app',
    moduleId: module.id,
    templateUrl: './app.component.html',
  }
)
export class AppComponent {
  onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
    console.log(`Tab selected:  ${args.newIndex}`);
  }
}

API

待办事项：在此处描述您的插件方法和属性。请参阅 nativescript-feedback 以获取示例。

许可证

Apache 许可证第 2 版，2004 年 1 月