2.1.0-alpha.4 • Published 2 years ago

@tanbo/ui-native v2.1.0-alpha.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

简介

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

安装

npm install @tanbo/ui-native --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>

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

tanbo-ui-native 主要分为三个模块,分别是 UIComponentsModuleUIDirectivesModuleUIFormsModule

  • UIComponentsModule 主要提供了 native 页面常用的 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 '@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 {
}
// # 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 文件

// # main.ts
// 按照 angular 项目的约定,在 main.ts 里导入全局样式表
import '@tanbo/ui-native/bundles/index.min.css';

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

// # 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";
// # main.ts
// 按照 angular 项目的约定,在 main.ts 里导入全局样式表
import './global.scss';
2.1.0-alpha.4

2 years ago

2.1.0-alpha.3

2 years ago

2.1.0-alpha.2

2 years ago

2.1.0-alpha.1

2 years ago

2.1.0-alpha.0

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.0-alpha.1

3 years ago

2.0.0-alpha.0

3 years ago

1.2.9

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago

0.0.3-alpha.6

3 years ago

0.0.3-alpha.5

3 years ago

0.0.3-alpha.4

3 years ago

0.0.3-alpha.3

3 years ago

0.0.3-alpha.2

3 years ago

0.0.3-alpha.1

3 years ago

0.0.3-alpha.0

3 years ago

0.0.2-alpha.0

3 years ago

0.0.1-beta.17

3 years ago

0.0.1-beta.16

3 years ago

0.0.1-beta.15

4 years ago

0.0.1-beta.14

4 years ago

0.0.1-beta.13

4 years ago

0.0.2-beta.0

4 years ago

0.0.1-beta.12

4 years ago

0.0.1-beta.11

4 years ago

0.0.1-beta.10

4 years ago

0.0.1-beta.9

4 years ago

0.0.1-beta.8

4 years ago

0.0.1-beta.7

4 years ago

0.0.1-beta.6

4 years ago

0.0.1-beta.5

4 years ago

0.0.1-beta.4

4 years ago

0.0.1-beta.3

4 years ago

0.0.1-beta.2

4 years ago

0.0.1-beta.1

4 years ago

0.0.1-alpha.21

4 years ago

0.0.1-alpha.20

4 years ago

0.0.1-alpha.19

4 years ago

0.0.1-alpha.18

4 years ago

0.0.1-alpha.17

4 years ago

0.0.1-alpha.16

4 years ago

0.0.1-alpha.15

4 years ago

0.0.1-alpha.14

4 years ago

0.0.1-alpha.13

4 years ago

0.0.1-alpha.12

4 years ago

0.0.1-alpha.11

4 years ago

0.0.1-alpha.10

4 years ago

0.0.1-alpha.9

4 years ago

0.0.1-alpha.7

4 years ago

0.0.1-alpha.6

4 years ago

0.0.1-alpha.5

4 years ago

0.0.1-alpha.4

4 years ago

0.0.1-alpha.3

4 years ago

0.0.1-alpha.2

4 years ago

0.0.1-alpha.1

4 years ago