ionic5学习-------制作一个简单的登录界面

最新推荐文章于 2021-03-14 12:51:37 发布

浅生莫离

最新推荐文章于 2021-03-14 12:51:37 发布

阅读量813

点赞数

文章标签： javascript css html node.js

本文链接：https://blog.csdn.net/qq_44323069/article/details/109059444

版权

本文档详细介绍了如何使用Ionic5构建一个简单的登录界面。首先从三种不同类型的项目模板（tabs, blank, sidemenu）中选择启动项目。然后，通过ng generate page命令创建home页面，并在app.components.ts中配置路由跳转到该页面。接着，为home页面设置背景。最后，创建login页面，设计登录表单，包括背景选择、输入框和按钮，同时在login.page.ts中进行相应配置。" 132843750,7337247,Kafka实战：大规模消息消费系统设计与配置解析,"['消息队列', '分布式系统', '架构设计', 'Kafka', '性能调优']

摘要由CSDN通过智能技术生成

ionic5学习------制作一个简单的登陆界面

一. 基本

1.创建底部菜单形式： ionic start 项目名 tabs
2.创建空项目： ionic start 项目名 blank
3.创建列表形式： ionic start 项目名 sidemenu

二. 创建一个home页面

1.创建一个新的page： ng generate page 文件名

2.在app.components添加头依赖：
Import {Router} from '@angular/router'

在下方constuctor中添加 private router：Router`


constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router
  )

在initializeApp() 添加this.router.navigateByUrl(‘zhehome’);，我加的页面叫zhehome

 initializeApp() {
   
    this.platform.ready().then(() => {
   
      this.statusBar.styleDefault();
      this.router.navigateByUrl('thehome');
      this.splashScreen.hide();
    }

3.在css文件中添加背景
i

on-content{
   
    --background: url(../../assets/qiaoben1.jpg)</

最低0.47元/天解锁文章