ionic generate <type> <name> [options]
コマンド例
ionic generate
ionic generate page
ionic generate page contact
ionic generate component contact/form
ionic generate component login-form --change-detection=OnPush
ionic generate directive ripple --skip-import
ionic generate service api/user
(posts ページを追加してみます。)(フォルダも作成できます。その場合は posts/index のように記述します。)
ionic generate page posts
こちらのファイルが追加されます
CREATE src/app/posts/posts-routing.module.ts (343 bytes)
CREATE src/app/posts/posts.module.ts (465 bytes)
CREATE src/app/posts/posts.page.scss (0 bytes)
CREATE src/app/posts/posts.page.html (124 bytes)
CREATE src/app/posts/posts.page.spec.ts (640 bytes)
CREATE src/app/posts/posts.page.ts (252 bytes)
UPDATE src/app/app-routing.module.ts (712 bytes)
app/app.component.ts
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
},
// 追加
{
title: 'Posts',
url: '/posts',
icon: 'clipboard'
},
// 追加
];
icon はこちらから調べます
https://ionicons.com/
これで、サイドメニューに追加されて画面遷移が確認できます。
追加されたページに sidemenu を追加する
app/posts/posts.page.html
<ion-header>
<ion-toolbar>
<ion-title>posts</ion-title>
</ion-toolbar>
</ion-header>
↓
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
posts
</ion-title>
</ion-toolbar>
</ion-header>