Ионная структура и нижний фиксированный контент

Ответ 1

Вы можете использовать anythnn вне ion-content с помощью кнопки внутри него.

Демо

  <ion-list>

    <ion-item ng-repeat="item in items" 
              item="item"
              href="#/item/{{item.id}}">
      Item {{ item.id }}

    </ion-item>

  </ion-list>

</ion-content>

<div class="fixed-outside">
  <div class="row">
        <div class="col">
            <button class="button button-circle button-energized icon ion-log-in"></button>
        </div>
        <div class="col">
            <button class="button button-circle button-positive icon ion-social-facebook"></button>
        </div>
    </div>

    <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>
</div>

Ответ 2

Как просто использовать стандартную панель вкладок для ионов и просто изменить высоту на авто или любые пиксели, которые вы хотите. Просто убедитесь, что вы поместили код ниже тега с содержанием иона.

Код:

<ion-content padding="true">
</ion-content>  
  <div class="tabs tabs-dark" style="height:auto;">
    <div class="row">
      <div class="col">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" >
          </label>
        </div>
        <div class="row">
          <div class="col">
            <button class="button button-block button-positive">LOGIN</button>                         
          </div>
        </div>
      </div>
    </div>
  </div>

Пример Codepen: http://codepen.io/ridwan/pen/JozeYK

Ответ 3

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

Codepen

Соответствующий HTML

<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
  <ion-content padding="true" scroll="false">
    <ion-scroll scroll-height>
       Content to go above the form
    </ion-scroll>
    <div class="login-form">
      Login form
    </div>
  </ion-content>
</ion-view>

CSS

.scroll-content {
  position: relative;
}

div.login-form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

Директива

.directive('scrollHeight', function($window) {
  return {
    link: function(scope, element, attrs) {
      scope.onResize = function() {
        var winHeight = $window.innerHeight;
        var form = angular.element(document.querySelector('.login-form'))[0];
        var formHeight = form.scrollHeight;
        var scrollHeight = winHeight - formHeight;

        element.css("height", scrollHeight + "px");
      }
      scope.onResize();

      angular.element($window).bind('resize', function() {
        scope.onResize();
      })
    }
  }
})

Ответ 4

все элементы, которые вы хотите зафиксировать в нижней части, должны быть вне ion-content. Это рабочий пример:

<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
   <img class="logo" src="img/logo.jpeg" />
</ion-content>

<!-- align to the bottom of the page -->
  <div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
    <div class="list">
        <label class="item item-input light-text-input">
            <input type="text" placeholder="user" ng-model="user">
        </label>
        <label class="item item-input light-text-input">
            <input type="text" placeholder="password" ng-model="password">
        </label>
    </div>

    <div class="row">
        <div class="col">
            <button class="button button-block button-energized">Login</button>
        </div>
        <div class="col">
            <button class="button button-block button-positive">FB Login</button>
        </div>
    </div>

    <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>

Ответ 5

Я просто нахожу простое решение, которое отлично подходит для меня.

<ion-content>
    <ion-scroll style="height: 300px">
    <div style="height: 1000px">
        your scroll content
    </div>>
    </ion-scroll>
    <div>
        your fixed div, maybe a form
    </div>
</ion-content>

вы также можете обратиться к http://ionicframework.com/docs/api/directive/ionScroll/

Надеюсь, это поможет.

Ответ 6

Я закончил более или менее обход ионных намерений и использовал компоновку гибкой коробки:

<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
    <div class="flex-head"> ... </div>
    <div class="flex-body flex-1"> ... </div>
    <div class="flex-foot"> ... </div>
</ion-view>

SCSS, используя ионные миксины, выглядит примерно так:

.flex-wrapper {
    @include display-flex;
    @include flex-direction(column);
    ...
}

.flex-1 {
    @include flex(1);
    ...
}

Ответ 7

на самом деле я использую версию Ionic 2.0.0 i, разрешающую этот код

<ion-fixed class="fixed">
 <button fab fab-right fab-bottom>
   ${{ totalPrice }}
 </button>
</ion-fixed> 

в вашем файле Scss

.fixed {
 bottom: 50px;
 right: 10px;
}