Framework7
v3
Support Framework7
stars forks
Improve this Doc

iPhone X Styles

With the iPhone X release, Apple introduced so called "safe areas", when the app UI must include additional top/bottom spacing (to consider top notch and new bottom bar) in portrait orientation and additional left/righ spacing (to consider left/right notch) in landscape orientation.

In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements:

  • ios-edges - add to element that is stick to left/right screen edges in landscape orientation
  • ios-left-edge - add to element that is stick to the left screen edge in landscape orientation
  • ios-right-edge - add to element that is stick to the right screen edge in landscape orientation
  • no-ios-edges - add to element which is is inside of ios-edges to remove additional horizontal spacing
  • no-ios-left-edge - add to element which is is inside of ios-edges to remove additional left spacing
  • no-ios-right-edge - add to element which is is inside of ios-edges to remove additional right spacing

The following elements don't require such classes:

  • Popup, Sheet - already considered as full screen elements that is required extra spacing on both left and right sides
  • Left Panel - already considered as element that is stick to the left screen edge and requires extra spacing on left side
  • Right Panel - already considered as element that is stick to the right screen edge and requires extra spacing on right side

Here is the example app layout with such classes:

<body>
  <!-- app root -->
  <div id="app">
    <!-- statusbar -->
    <div class="statusbar"></div>

    <!-- left panel doesn't require any additional classes -->
    <div class="panel panel-left panel-cover">
      ...
    </div>

    <!-- right panel doesn't require any additional classes -->
    <div class="panel panel-right panel-reveal">
      ...
    </div>

    <!-- main view, full-wide element, add "ios-edges" class -->
    <div class="view view-main view-init ios-edges" data-url="/">
      <div class="page">
        <div class="navbar">
          ...
        </div>
        <div class="page-content">
          <!-- full-wide list, will inherit ios-edges from view -->
          <div class="list">
            ...
          </div>
          <!-- full-wide content block, will inherit ios-edges from view -->
          <div class="block">
            ...
          </div>
          <!--
            two-columns blocks: need to
              - remove extra spacing on right side for left block
              - remove extra spacing on left side for right block
          -->
          <div class="row">
            <!-- remove right spacing on left block -->
            <div class="block col no-ios-right-edge">
              ...
            </div>
            <!-- remove left spacing on right block -->
            <div class="block col no-ios-left-edge">
              ...
            </div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  <script src="../packages/core/js/framework7.min.js"></script>
  <script src="js/routes.js"></script>
  <script src="js/app.js"></script>
</body>