tanbo-ui-native

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #golang #go #machine-learning #rust #docker #nodejs #java #awesome #cli #kubernetes #mcp

tanbo-ui-native

(★ 19)

开发移动端native应用的封装

tanbo-ui-native Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 简介

`@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-navbar>
      
      <ui-back>返回</ui-back>
      
      <ui-buttons>
        <button>按扭</button>
      </ui-buttons>
      
      <ui-title>标题</ui-title>
      
      <ui-buttons>
        <button>按扭</button>
      </ui-buttons>
    </ui-navbar>
  </ui-header>
  <ui-content>
    
    <ui-scroll>
    
    </ui-scroll>
  </ui-content>
  <ui-footer>
    
  </ui-footer>
</ui-page>
```

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

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

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

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

@NgModule({
    imports: [
        /* ... 其它模块 */
        UINativeModule.forRoot(), // 如果是异步模块，如路由模块，请调用 `forChild()` 方法
        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/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';
```

tanbo-ui-native

tanbo-ui-native Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

tanbo-ui-native

tanbo-ui-native Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README