# @tanbo/ui-native

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

Latest version **2.1.0-alpha.4** (published 2020-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tanbo/ui-native
pnpm add @tanbo/ui-native
yarn add @tanbo/ui-native
bun add @tanbo/ui-native
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0-alpha.4 |
| Published | 2020-03-28 |
| First published | 2018-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Tan Bo |
| Maintainers | tanbo |
| Keywords | angular components, native, angular ui, ui, component, theme, framework |

## Links

- npm: https://www.npmjs.com/package/@tanbo/ui-native
- Repository: https://github.com/tbhuabi/tanbo-ui-native
- Homepage: https://github.com/tbhuabi/tanbo-ui-native#readme
- Issues: https://github.com/tbhuabi/tanbo-ui-native.git/issues
- npm.io page: https://npm.io/package/@tanbo/ui-native

## Dependencies (4)

- [tanbo-bezier](https://npm.io/package/tanbo-bezier.md) ^0.0.5
- [better-scroll](https://npm.io/package/better-scroll.md) 2.0.0-beta.6
- [@types/tween.js](https://npm.io/package/@types/tween.js.md) ^16.0.0
- [@tweenjs/tween.js](https://npm.io/package/@tweenjs/tween.js.md) ^17.0.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 2.1.0-alpha.4 (latest) — 2020-03-28
- 2.1.0-alpha.3 — 2020-03-21
- 2.1.0-alpha.2 — 2020-03-16
- 2.1.0-alpha.1 — 2020-03-13
- 2.0.4 — 2020-03-05
- 2.0.3 — 2020-03-05
- 2.0.2 — 2020-02-21
- 2.0.1 — 2019-10-09
- 2.0.0-alpha.1 — 2019-07-02
- 2.0.0-alpha.0 — 2019-06-13
- 1.2.9 — 2019-05-28
- 1.2.8 — 2019-04-28
- 1.2.7 — 2019-03-21
- 1.2.6 — 2019-03-20
- 1.2.5 — 2019-03-20
- … 52 more at https://npm.io/package/@tanbo/ui-native/versions

## README

# 简介

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

### 安装

```bash
npm install @tanbo/ui-native --save
```

## 页面结构

```html
<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>
```


### 在项目中导入 @tanbo/ui-native

tanbo-ui-native 主要分为三个模块，分别是 `UIComponentsModule`、`UIDirectivesModule`、`UIFormsModule`。
+ `UIComponentsModule` 主要提供了 native 页面常用的 ui 组件
+ `UIDirectivesModule` 主要提供了一些常用指令
+ `UIFormsModule` 主要提供了一些表单组件，及一些表单校验的指令

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

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

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

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

export class AppModule {
}
```

```typescript
// # app.component.ts 根组件

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

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


### 在项目中导入 @tanbo/ui-native 的样式表

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

在 ts 文件中导入编译好的 css 文件
```typescript
// # main.ts
// 按照 angular 项目的约定，在 main.ts 里导入全局样式表
import '@tanbo/ui-native/bundles/index.min.css';
```

在 global.scss 中导入 scss 源文件和字体 css 文件，然后导入 global.scss 到 main.ts
```scss
// # global.scss
@import "~@tanbo/ui-native/assets/scss/varibles";
@import "~@tanbo/ui-native/assets/scss/custom-index";
@import "~@tanbo/ui-native/assets/fonts/style.css";
```
```typescript
// # main.ts
// 按照 angular 项目的约定，在 main.ts 里导入全局样式表
import './global.scss';
```

---
_Source: https://npm.io/package/@tanbo/ui-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._