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 start和npm 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  
    相关文章