NativeScript Angular 底部面板插件

安装

tns plugin add nativescript-ng-bottomsheet

用法

iOS 注意：阴影将在以后添加。:(

底部面板插件扩展了 GridLayout 并公开了一个具有 state 属性和名为 setState(state) 的方法的简单 BottomSheet 类。此外，插件还公开了 BottomSheetState 接口，该接口有助于管理底部面板的状态。

XML

    <Page
        navigatingTo="onNavigatingTo"
        xmlns="http://schemas.nativescript.org/tns.xsd"
        xmlns:ui="nativescript-ng-bottomsheet/ng-bottomsheet">

        <ActionBar>
            <Label text="Home"></Label>
        </ActionBar>

        <GridLayout>
            <!-- Add your page content here -->
            <ui:BottomSheet stateChange="onStateChange" />
        </GridLayout>
    </Page>

Angular

不要忘记在 app.module.ts 中注册组件。

import { registerElement } from 'nativescript-angular/element-registry';
import { BottomSheet } from 'nativescript-ng-bottomsheet/ng-bottomsheet';
registerElement('BottomSheet', () => BottomSheet);

HTML

    <NgBottomSheet (stateChange)="onStateChange($event)"></NgBottomSheet>

TypeScript

TypeScript

    onStateChange(args) {
        const {eventName, object, state} = args;
        console.log(state); // it represents one of BottomSheetState values

        // If you want to change state via code, use method setState()
        // object.setState(BottomSheetState.COLLAPSED);
        // object.setState(BottomSheetState.HALF_EXPANDED);
        // object.setState(BottomSheetState.EXPANDED);
    }

运行 Angular 演示

cd src
npm run demo-angular.<platform>

运行纯 Nativescript 演示

cd src
npm run demo.<platform>

许可证

MIT