github.com
Generate
ionicでは各種Generateがコマンドから可能
html、css、ts、テストのテンプレートを自動で作ってくれるので利用しましょう
ionic generate - Ionic Documentation
公式の通り
page、component、directive、service の作成ができる
Modalで表示するページを作る
$ ionic generate page modal/streaming
なぜか、generateすると下記のエラーが出るようになった
Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
未解決事件だが、実行する時のパスを src/appからにすると実行できるようになったが
なぜかプロジェクトのルートにファイルが作成されたので、そのファイルを src/app以下に置きなおした
更に、app-routing.modules.tsにて、モジュールのパスを管理しているので、そのファイルを開き正しく直した
Modalを呼び出す
とりあえず tab1にボタンを配置してそこから呼び出す事にした
tab1.page.ts
import { StreamingPage} from '../modal/streaming/streaming.page';
export class Tab1Page {
constructor(
private modalCtrl: ModalController,
) {
}
async presentModal() {
const modal = await this.modalCtrl.create({
component: StreamingPage,
});
return await modal.present();
}
}
ModalControllerモジュールをimportし
presentModalインタフェースを追加した
tab1.page.htmlは下記のようにボタンを追加した
<ion-content [fullscreen]="true">
<div class="ion-padding">
<ion-button expand="block" fill="outline" (click)="presentModal()">Streaming</ion-button>
</div>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
streamingビデオを再生させるために streaming.page.htmlに追記
<ion-content>
<video width='950' height='700'
src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8" controls
autoplay playsinline webkit-playsinline></video>
</ion-content>
これで、Modalでビデオが再生できる
Closeボタン
モーダルをCloseするにはdismissを呼ぶだけだ
ボタンを追加し
streaming.pages.html
<ion-toolbar>
<ion-title>streaming {{test}}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
</ion-buttons>
動作をつける
streaming.pages.ts
export class StreamingPage implements OnInit {
@Input() test: string;
close() {
this.modalCtrl.dismiss();
}
```
# CSS
cssClass: 'app-streaming',
だけではダメのようで modal-wrapperにもCSS適用した
このあたりはまだよくわかってない・・・
globals.css
.app-streaming .modal-wrapper {
width: 100%;
height: 100%;
display: block;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}