简介

@cloudbae-frontend/ui-mobile 是基于 angular 开发的移动端开发框架，支持常见的如路由转场动画、触摸手势、上拉加载、下拉刷新等功能。文档地址：https://www.tanboui.com/native。

安装

npm install @cloudbae-frontend/ui-mobile --save

页面结构

<ui-page>
  <ui-header>
    <!-- 如果不需要头部，ui-header 是可选的 -->
    <ui-navbar>
      <!-- ui-back 组件是可选的，只有在需要返回父页面才声明-->
      <ui-back>返回</ui-back>
      <!-- ui-buttons 组件不是必需的，只有在需要左上角有按扭时才声明-->
      <ui-buttons>
        <button>按扭</button>
      </ui-buttons>
      <!-- 如果需要头部，ui-navbar 是必需的，因为在 webview 全屏的情况下，ui-header 会有 20px 的 padding-top，用来显示手机的状态栏。如果你需要设置整个头部的背景颜色，则应该设置 ui-header 的背景，而不是 ui-navbar -->
      <ui-title>标题<ui-title>
      <!-- ui-buttons 组件不是必需的，只有在需要右上角有按扭时才声明-->
      <ui-buttons>
        <button>按扭</button>
      </ui-buttons>
    </ui-navbar>
  </ui-header>
  <ui-content>
    <!-- ui-content 是必需的，页面的主要内容应该放在这里 -->
    <ui-scroll>
    <!--ui-content 的内容是不可滚动的，如果需要内容可滚动，则需要把内容放在 ui-scroll 内。-->
    </ui-scroll>
  </ui-content>
  <ui-footer>
    <!-- 如果不需要固定底部，ui-footer 是可选的 -->
  </ui-footer>
</ui-page>

在项目中导入 @cloudbae-frontend/ui-mobile

cloudbae-ui-mobile 主要分为三个模块，分别是 UIComponentsModule、UIDirectivesModule、UIFormsModule。

• UIComponentsModule 主要提供了 mobile 页面常用的 ui 组件
• UIDirectivesModule 主要提供了一些常用指令
• UIFormsModule 主要提供了一些表单组件，及一些表单校验的指令

// # app.module.ts 入口模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { UIComponentsModule, UIDirectivesModule, UIFormsModule } from '@cloudbae-frontend/ui-mobile';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        UIComponentsModule.forRoot(), // 如果是异步模块，如路由模块，请调用 `forChild()` 方法
        UIDirectivesModule,
        UIFormsModule, // UIFormsModule 一定要写在 FormsModule 之前，否则会导致部分校验指令不能正常工作
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

// # app.component.ts 根组件

import { Component } from '@angular/core';

@Component({
    selector: '<my-app></my-app>',
    template: '<ui-app></ui-app>'
})
export class AppComponent {
}

在项目中导入 @cloudbae-frontend/ui-mobile 的样式表

cloudbae-ui-mobile 的样式表采用 sass 开发，你可以导入 sass 源文件，进行定制化开发，也可以直接导入已编译好的 css 文件。

在 ts 文件中导入编译好的 css 文件

// # main.ts
// 按照 angular 项目的约定，在 main.ts 里导入全局样式表
import '@cloudbae-frontend/ui-mobile/index.min.css';

在 global.scss 中导入 scss 源文件和字体 css 文件，然后导入 global.scss 到 main.ts

// # global.scss
@import "~@cloudbae-frontend/ui-mobile/assets/scss/varibles";
@import "~@cloudbae-frontend/ui-mobile/assets/scss/custom-index";
@import "~@cloudbae-frontend/ui-mobile/assets/fonts/style.css";

// # main.ts
// 按照 angular 项目的约定，在 main.ts 里导入全局样式表
import './global.scss';