3.ionic组件

ui组件库官网https://ionicframework.com/docs/api 

  1. //vscode中安装插件
  2. Ionic 4 Snippets
  1. //ionic组件在页面直接使用 无需导入
  2. //tab1.page.html
  3. <ion-content>
  4.   <ion-button color="success">Default</ion-button>
  5. </ion-content>

4-1配置新的路由模块页面

  1. ionic g page views/detail     //新建detail页面   不用导入可以直接使用

页面跳转

  1. //tab1.page.html
  2. <ion-content>
  3.   <ion-button color="success"
  4.   [routerLink]="['/detail']" routerLinkActive="router-link-active"    //和angular跳转一样
  5.   >Default</ion-button>
  6. </ion-content>

4-2组件使用

  1.  <!-- i-back-button：快捷键 -->
  2.    <ion-buttons slot="start">
  3.      <ion-back-button text="返回" color="primary"></ion-back-button>
  4.    </ion-buttons>

4-3配置底部导航

  1. //1.新增模块
  2. ionic g page tab4
  3. //2.删除app-routing.module.ts文件中自动配置的tab4的路由项
  4. //3.tabs-routing.module.ts文件中配置tab4路由
  5. const routes: Routes = [
  6.   {
  7.     ...
  8.       {
  9.         path: 'tab4',
  10.         children: [
  11.           {
  12.             path: '',
  13.             loadChildren: () =>
  14.               import('../tab4/tab4.module').then(m => m.Tab4PageModule)
  15.           }
  16.         ]
  17.       },
  18. ];
  19. //4.tabs.page.html配置
  20.  <ion-tab-bar slot="bottom">
  21.       ...
  22.       <ion-tab-button tab="tab4">
  23.       <ion-icon name="send"></ion-icon>
  24.       <ion-label>Tab Four</ion-label>
  25.     </ion-tab-button>
  26. </ion-tab-bar>