Ionic 2 - Property Binding, чтобы сделать приложение невидимым

Я немного нул для ионного, так что это может быть глупый вопрос.Ionic 2 - Property Binding, чтобы сделать приложение невидимым

Нажав на кнопку, я хочу наложить все мое приложение черным изображением (или сделать все невидимым), но все еще есть кнопки, работающие под ним.

Мое приложение основано на приложении примера вкладок.

До сих пор я попытался следующие

app.scss

.dark-overlay { 
background-color: #000 !important; 
opacity: 1; 
}

мой-tab.html

<ion-content class="dark-overlay" (ng-hide)="showOverlay"> 
.... 
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>

мои-tab.ts

stealthMode() { 
this.myElements = document.querySelectorAll("dark-overlay"); 
for (var i = 0; i < myElements.length; i++) { 
myElements[i].style.opacity = 0; 
} 
}

Даже если я смогу заставить это работать, это не будет окончательный ответ, поскольку установка непрозрачности в app.scss на 0 все равно оставляет видимость на панели, но мне тоже нужно черным.

Я думаю, что это связано с привязкой к собственности.

Любые идеи?

Благодаря

источник

2017-02-06 Webtopia

Я не уверен, что об эффективности функции «stealthMode». Вы уже показываете/скрываете div .dark-overlay, используя ng-hide. – n00b

Спасибо, вы можете дать мне небольшой пример того, как это будет выглядеть в коде? – Webtopia

вам нужно использовать указатель событие, чтобы события идут через темную накладку. я показал, что в этом Plunkr (перейти на вторую вкладку, которая показывает домашняя страница)

style.css

.dark-overlay{ 
position:absolute; 
width:100%; 
height:100%; 
background-color:#888; 
opacity:0.9; 
top:0px; 
left:0px; 
z-index:1000; 
pointer-events: none; 
}

и иметь это в home.html

<button (click)="stealthMode()">Tint</button> 
<div class="dark-overlay" [hidden]="showOverlay"></div>

и это в домашних условиях .ts

showOverlay:boolean = false; 
    stealthMode(){ 
    this.showOverlay = !this.showOverlay; 
    }

источник

2017-02-07 00:20:44 n00b

Привет, Спасибо за указатель (простите за каламбур). Я все еще не уверен, как я использую это в файлах .html и .ts. Это кажется вам правильным? Также, если у меня возникла проблема с невозможностью скрыть панель вкладок. Извините, я не смог проверить ваш ответ, так как сейчас я не в коде. Еще раз спасибо. – Webtopia

Это замечательное спасибо. Я не могу дождаться, чтобы вернуться домой и проверить его. Единственный бит, который мне нужно решить, - сделать панель вкладок невидимой. Я думаю, что если я применил класс dark-overlay к вкладкам самостоятельно. Это станет немного сложнее, так как каждая отдельная вкладка будет иметь кнопку stealthMode, и мне нужно будет применить невидимость глобально, используя мою службу общих данных. Но ты меня на правильном пути. Благодарю. – Webtopia

Я решил просто скрыть панель, когда все будет скрыто. Я использовал этого провайдера и добавил его к моему представлению. https://gist.github.com/0x1ad2/e32859546b1bfeff5c55ceddf221e5b2 Все работает отлично теперь спасибо – Webtopia

Вы можете сделать переплет для рендеринга tha т динамически используя угловые директивы.

Проверить это для чистой реализации:
ngIF

источник

2017-02-07 03:26:18

Ionic 2 - Property Binding, чтобы сделать приложение невидимым

ответ

Смежные вопросы