App / Core

    This constructor returns main app Framework7 instance.

    Lets look at the list of available parameters:

    These are default app parameters for app core module.

    Most of components that has JavaScript API may extend this list of parameters with the property named as component. For example Panel component extends app parameters with panel property that accepts Panel specific parameters.

    Example:

    1. var app = new Framework7({
    2.   id: 'com.myapp.test',
    3.   // Extended by Panel component:
    4.   panel: {
    5.     swipe: 'left',
    6.     leftBreakpoint: 768,
    7.     rightBreakpoint: 1024,
    8.   },
    9.   // Extended by Dialog component:
    10.   dialog: {
    11.     title: 'My App',
    12.   },
    13.   // Extended by Statusbar component:
    14.   statusbar: {
    15.     iosOverlaysWebview: true,
    16.   },
    17. });

    Same as with app parameters most of components that has JavaScript API may extend this list of properties with the property named as component. For example Panel component extends app instance properties with panel property that accepts Panel specific properties and methods.

    Example:

    2. app.panel.open('left');
    4. // Hide statusbar
    5. app.statusbar.hide();

    App instance emits the following core events:

    Example:

    1. :root {
    2.   --f7-theme-color: #007aff;
    3.   --f7-theme-color-rgb: 0, 122, 255;
    4.   --f7-theme-color-shade: #0066d6;
    5.   --f7-theme-color-tint: #298fff;
    6.   --f7-safe-area-left: 0px;
    7.   --f7-safe-area-right: 0px;
    8.   --f7-safe-area-top: 0px;
    9.   --f7-safe-area-outer-left: 0px;
    10.   --f7-safe-area-outer-right: 0px;
    11.   --f7-device-pixel-ratio: 1;
    12. }
    13. @supports (left: env(safe-area-inset-left)) {
    14.   :root {
    15.     --f7-safe-area-top: env(safe-area-inset-top);
    16.     --f7-safe-area-bottom: env(safe-area-inset-bottom);
    17.   }
    18.   :root .ios-left-edge,
    19.   :root .ios-edges,
    20.   :root .safe-area-left,
    21.   :root .safe-areas,
    22.   :root .popup,
    23.   :root .sheet-modal,
    24.   :root .panel-left {
    25.     --f7-safe-area-left: env(safe-area-inset-left);
    26.     --f7-safe-area-outer-left: env(safe-area-inset-left);
    27.   }
    28.   :root .ios-right-edge,
    29.   :root .ios-edges,
    30.   :root .safe-area-right,
    31.   :root .safe-areas,
    32.   :root .popup,
    33.   :root .sheet-modal,
    34.   :root .panel-right {
    35.     --f7-safe-area-right: env(safe-area-inset-right);
    36.     --f7-safe-area-outer-right: env(safe-area-inset-right);
    37.   }
    38.   :root .no-safe-areas,
    39.   :root .no-safe-area-left,
    40.   :root .no-ios-edges,
    41.   :root .no-ios-left-edge {
    42.     --f7-safe-area-left: 0px;
    43.     --f7-safe-area-outer-left: 0px;
    44.   }
    45.   :root .no-safe-areas,
    46.   :root .no-safe-area-right,
    47.   :root .no-ios-edges,
    48.   :root .no-ios-right-edge {
    49.     --f7-safe-area-right: 0px;
    50.     --f7-safe-area-outer-right: 0px;
    51.   }
    52. }
    53. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    54.   :root {
    55.     --f7-device-pixel-ratio: 2;
    56.   }
    57. }
    58. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    59.   :root {
    60.     --f7-device-pixel-ratio: 3;
    62. }
    63. /*====================
    64.   Fonts
    65.   ==================== */
    66. :root {
    67.   --f7-font-size: 14px;
    68. }
    69.   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
    70.   --f7-text-color: #000;
    71.   --f7-line-height: 1.4;
    72. }
    73. .ios .theme-dark,
    74. .ios.theme-dark {
    75.   --f7-text-color: #fff;
    76. }
    77. .md {
    78.   --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
    79.   --f7-text-color: #212121;
    80.   --f7-line-height: 1.5;
    81. }
    82. .md .theme-dark,
    83. .md.theme-dark {
    84.   --f7-text-color: rgba(255, 255, 255, 0.87);
    85. }
    86. .aurora {
    87.   --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
    88.   --f7-text-color: #000;
    89.   --f7-line-height: 1.5;
    90. }
    91. .aurora .theme-dark,
    92. .aurora.theme-dark {
    93.   --f7-text-color: #fff;
    94. }
    95. /*====================
    96.   Bars
    97.   ==================== */
    98. :root {
    99.   /*
    100.   --f7-bars-link-color: var(--f7-theme-color);
    101.   */
    102.   --f7-bars-bg-image: none;
    103.   --f7-bars-bg-color: #f7f7f8;
    104.   --f7-bars-bg-color-rgb: 247, 247, 248;
    105.   --f7-bars-text-color: #000;
    106.   --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    107.   --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    108. }
    109. .theme-dark {
    110.   --f7-bars-bg-color: #1b1b1b;
    111.   --f7-bars-text-color: #fff;
    112. }
    113. .ios {
    114.   --f7-bars-border-color: #c4c4c4;
    115. }
    116. .ios .theme-dark,
    117. .ios.theme-dark {
    118.   --f7-bars-border-color: #282829;
    119. }
    120. .md {
    121.   --f7-bars-border-color: transparent;
    122. }
    123. .aurora {
    124.   --f7-bars-border-color: rgba(0, 0, 0, 0.2);
    125. }
    126. .aurora .theme-dark,
    127. .aurora.theme-dark {