Я выбрал представление с ионной вкладкой, поэтому я могу использовать систему шаблонов, но я не могу удалить вкладки. Мне нужно подобное представление, и мне удалось удалить панель заголовка, но я не могу удалить панель вкладок
Это то, что я получил до сих пор:
Если я скрою панель вкладок (ion-tabs{display:none}), она также удалит содержимое, чего я не хочу.
Посмотрите документацию по вкладкам Ionic:
Чтобы скрыть вкладку, но все же показать содержимое, добавьте класс "tabs-item-hide".
Итак, вы изменили бы это:
<div class="tabs">
<a class="tab-item" href="#">
Home
</a>
...
</div>
:
<div class="tabs tabs-item-hide">
<a class="tab-item" href="#">
Home
</a>
...
</div>
Я знаю, что на это уже дан ответ, но есть более "angular способ" сделать это, что может быть полезно. Это делается с помощью настраиваемой директивы, которую вы можете применить к представлениям, которые вы не хотите показывать нижней панель вкладок.
Мое решение для этого в моем приложении было:
1 - Используйте ng-hide, привязанный к переменной rootScope на панели вкладок, поэтому я могу скрыть/показать ее в любом контроллере/представлении моего приложения:
<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
2 - Создайте настраиваемую директиву, которая, если присутствует, скроет панель вкладок (и снова отобразит панель вкладок, когда представление будет уничтожено/отклонено:
var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = true;
$scope.$on('$destroy', function() {
$rootScope.hideTabs = false;
});
}
};
});
3 - примените его к определенным представлениям, которые не нуждаются в видимости панели вкладок:
<ion-view title="New Entry Form" hide-tabs>
<!-- view content -->
</ion-view>
ps. Я думаю, что это можно улучшить, даже избегая необходимости ng-hide в объявлении <ion-tabs>, позволяя директиве выполнять всю "грязную работу".
Ответ Дэниела был очень близок (спасибо!), но в моем случае не работал:
ng-hide скрывает вкладку содержимое, а также вкладки (для меня, во всяком случае)Итак, здесь мой измененный шаблон:
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
Директива (снова основанная на Данииле):
var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
scope.$on('$destroy', function() {
$rootScope.hideTabs = false;
});
}
};
});
Использование:
<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
<!-- view content -->
</ion-view>
Я использовал dotfrank ответ, и он работал как шарм, за исключением тех случаев, когда я шел несколько слоев в определенном окне вкладки, а затем использовал кнопку "Назад". Возвращаясь к представлению, которое имеет директиву "hideTabs = 'true", на самом деле будет установлено значение "false", если вы не обернете $watch на hideTabs в событии $ionicView.beforeEnter.
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$on('$ionicView.beforeEnter', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
});
Надеюсь, это поможет! (также, это мой первый ответ... так что, если я полностью что-то пропущу, тогда прощай свою пустоту).
Ответ Dunc очень хороший, но не работает лучше всего, когда дело доходит до кеширования Ionic.
Используется событие $destroy, которое устанавливает переменную $rootScope, когда родительский вид срывается.
Однако, как прокомментировали другие, это событие $destroy происходит слишком поздно, возвращаясь к странице, на которой нужны вкладки. Это приводит к задержке перехода на переходы страниц. Кроме того, класс содержания ионов .has-tabs не добавляется до тех пор, пока не будет получена задержка, поэтому любой контент также будет закрыт вкладками.
Вместо этого мы должны reset в ионическом событии beforeLeave, чтобы гарантировать, что цикл дайджеста перехода получает изменение переменной во времени.
Тот же шаблон:
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
Директива (снова основанная на Dunc's):
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
});
Использование одинаковое -
<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
<!-- view content -->
</ion-view>
Для бонуса, если вы используете SASS, вы можете получить хороший всплывающий переход для панели вкладок, если вы добавите это в ваш .scss файл:
.tabs {
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
}
.tabs-item-hide > .tabs{
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
bottom: -$tabs-height;
display: flex;
}
Если вы используете ванильный CSS, замените $tabs-height высотой вашего бара.
Ng-if была единственной директивой, которая сработала для меня.
ng-if="$root.showList"
Надеюсь, что это поможет.
К сожалению, текущие ответы имеют задержку, прежде чем снова показывать вкладки. Кажется, что $scope получает $destroy немного позже, и когда вы переходите на страницу, которая должна иметь вкладки, есть отставание, прежде чем они будут пересмотрены. Тем не менее, связь paul привела меня к лучшему решению, у которого нет отставания:
app.controller('applicationController', function ($state, $rootScope) {
var hideTabsStates = ['tab.inbox-convo'];
$rootScope.$on('$ionicView.beforeEnter', function () {
$rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
});
});
<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">
Простое переопределение CSS работало для меня пример в кодефее, мое требование заключалось в том, чтобы скрыть основные вкладки для дочерних/внутренних представлений, например всплывающие представления + this не влияет на вторичные вкладки:
<style>
/* hide the main tabs */
.tab-nav{
display: none;
}
/* this takes care of the access margins bottom or top tabs */
.has-tabs, .has-tabs-top, .has-tabs-bottom {
bottom: 0px !important;
top: 0px !important;
}
</style>
ИЛИ в примере директивы:
angular.element(".tab-nav").css("display":"none");
Не забывайте:
<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>
https://github.com/driftyco/ionic/issues/395 Похоже, что вкладки являются довольно сложными в Ionic. Проверьте ссылку, она отлично поработала для меня.