Ionic 4初学者教程:自定义元素,按钮,导航和选项卡

分享于 

5分钟阅读

ionic

  繁體

创建一个包含基本元素的HTML页面:

创建一个文件夹ionic-javascript-template,然后在它内部创建文件index.html,并添加以下内容:


<html>

<head>
 <title>Ionic 4 JavaScript Template</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>

 <script src="src/index.js"></script>
</body>
</html>

在项目的文件夹中创建一个package.json,然后添加以下内容:


{
 "name": "ionic-javascript-template",
 "version": "1.0.0",
 "description": "Simple Ionic 4 Web Components Template",
 "main": "index.html",
 "scripts": {
 "start": "serve"
 
}
,"dependencies":{
}
,"devDependencies":{"serve":""
}
}

接下来运行以下命令安装依赖项:


npm install

现在创建一个src文件夹,你可以放置JavaScript文件,


document.body.innerHTML = `
<h1>Ionic 4 Web Components Template</h1>
<div>
 Hello World
</div>
`;

有两个命令可用于npm startnpm build

打开终端窗口,并运行npm start以打开dev服务器,然后可以在浏览器中打开http://localhost:5000,查看应用程序。

首先,你需要使用npm安装@ionic/core软件包:


npm install --save @ionic/core

接下来,你需要包括 node_modules/@ionic/core/dist/ionic.jsindex.html文件中的文件:


<script src='node_modules/@ionic/core/dist/ionic.js'></script>

现在修改src/index.js以使用一些Ionic核心web组件:


document.getElementById("app").innerHTML = `

<ion-app>
 <ion-header>
 <ion-toolbar color='primary'>
 <ion-title>Ionic JavaScript Starter</ion-title>
 </ion-toolbar>
 </ion-header>
 <ion-content padding>
 Hello Ionic 4
 </ion-content>  
</ion-app>
`;

使用各种组件:

  • <ion-app>:[App是Ionic应用程序的容器元素,每个项目只能有一个<ion-app>元素,应用程序可以包含许多Ionic组件,包括菜单,页眉,内容和页脚,覆盖组件在呈现时被附加到<ion-app>,]
  • <ion-header>
  • <ion-toolbar>
  • <ion-title>
  • <ion-content>
  • 对于按钮,你需要使用<ion-button>组件,所以在上一页<ion-content>中添加:

    
    <ion-button id="printToConsole"> Print To Console
    </ion-button>
    
    

    现在,如何将操作附加到此按钮?

    
    var printToConsoleBtn = document.querySelector("#printToConsole");
    
    

    下一步使用addEventListener()将click事件附加到打印到控制台的简单处理程序。

    
    printToConsoleBtn.addEventListener('click',(e)=>{
     console.log("Button clicked!");
    
    }
    );

    tab  教程  按钮  ION  buttons  Ionic  
    相关文章