Как я могу сделать модальный, чтобы стать полноэкранным в Ionic2?

Question

Вот мой модальный код:

let modal = Modal.create(DailyReportPage); 
    this.nav.present(modal); 

Он отлично работает на телефоне, однако на планшете он выглядит следующим образом: То, что я хочу, чтобы сделать его выглядеть следующим образом:

Answer 1

Я применяю этот стиль:

ion-modal { 
    .modal-wrapper { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 
} 

Answer 2

Вы должны следовать Modal

Модаль - это область содержимого, которая просматривает текущую страницу пользователя. Обычно он используется для выбора или редактирования элемента.

Итак, если вы хотите показать полный писк. Я думаю, что вы создаете новую страницу и нажать на него

this.nav.push(SamplePage, {item: item}); 

Answer 3

Примените этот стиль в вашем файле SCSS

ion-modal { 
    .modal-wrapper { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     width: 100%; 
     height: 100%; 
    } } 

Это должно быть из стороны вашего селектора.

например: -

page-mymodal { 
    //page CSS Codes 
} 
ion-modal { 
    .modal-wrapper { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 
} 

Answer 4

Вы можете изменить соответствующие переменные Ионные Сасс в файле variables.css:

$modal-inset-width: 100%; 
$modal-inset-height-large: 100%; 

Documentation (текущая версия 3.9, но я использую это с 3.7): http://ionicframework.com/docs/theming/overriding-ionic-variables/