Навігація

Застосунок

var app = new Techno4({
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});

Параметри застосунку

var app = new Techno4({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})

Clicks Module параметри

var app = new Techno4({
  clicks: {
    externalLinks: '.external',
  }
})

{

}

Touch Module параметри

var app = new Techno4({
  touch: {
    tapHold: true,
  }
})

{

}

var app = new Techno4({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})

{

}

var app = new Techno4({
  id: 'com.myapp.test',
  // Extended by Panel component:
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  },
  // Extended by Dialog component:
  dialog: {
    title: 'My App',
  },
  // Extended by Statusbar component:
  statusbar: {
    iosOverlaysWebview: true,
  },
});

Методи та властивості застосунку

Властивості

Методи

// Open panel
app.panel.open('left');

// Hide statusbar
app.statusbar.hide();

Події застосунку

app.on('panelOpen', function (panel) {
  console.log('Panel ' + panel.side + ' opened');
});

app.on('connection', function (isOnline) {
  if (isOnline) {
    console.log('app is online now')
  } else {
    console.log('app is offline now')
  }
});

app.on('darkModeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});

Змінні CSS

:root {
  --t4-theme-color: #007aff;
  --t4-theme-color-rgb: 0, 122, 255;
  --t4-theme-color-shade: #0066d6;
  --t4-theme-color-tint: #298fff;
  --t4-safe-area-left: 0px;
  --t4-safe-area-right: 0px;
  --t4-safe-area-top: 0px;
  --t4-safe-area-bottom: 0px;
  --t4-safe-area-outer-left: 0px;
  --t4-safe-area-outer-right: 0px;
  --t4-device-pixel-ratio: 1;
}
@supports (left: env(safe-area-inset-left)) {
  :root {
    --t4-safe-area-top: env(safe-area-inset-top);
    --t4-safe-area-bottom: env(safe-area-inset-bottom);
  }
  :root .ios-left-edge,
  :root .ios-edges,
  :root .safe-area-left,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-left {
    --t4-safe-area-left: env(safe-area-inset-left);
    --t4-safe-area-outer-left: env(safe-area-inset-left);
  }
  :root .ios-right-edge,
  :root .ios-edges,
  :root .safe-area-right,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-right {
    --t4-safe-area-right: env(safe-area-inset-right);
    --t4-safe-area-outer-right: env(safe-area-inset-right);
  }
  :root .no-safe-areas,
  :root .no-safe-area-left,
  :root .no-ios-edges,
  :root .no-ios-left-edge {
    --t4-safe-area-left: 0px;
    --t4-safe-area-outer-left: 0px;
  }
  :root .no-safe-areas,
  :root .no-safe-area-right,
  :root .no-ios-edges,
  :root .no-ios-right-edge {
    --t4-safe-area-right: 0px;
    --t4-safe-area-outer-right: 0px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --t4-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --t4-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --t4-font-size: 14px;
  /*
  --t4-bars-link-color: var(--t4-theme-color);
  */
  --t4-bars-bg-image: none;
  --t4-bars-translucent-opacity: 0.8;
  --t4-bars-translucent-blur: 20px;
  --t4-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%);
  --t4-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%);
  --t4-bars-text-color: #000;
  --t4-bars-bg-color: #t4t4f8;
  --t4-bars-bg-color-rgb: 247, 247, 248;
}
:root .dark,
:root.dark {
  --t4-bars-text-color: #fff;
}
.ios {
  --t4-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.4;
  --t4-text-color: #000;
  --t4-bars-border-color: rgba(0, 0, 0, 0.25);
}
.ios .dark,
.ios.dark {
  --t4-text-color: #fff;
  --t4-bars-bg-color: #121212;
  --t4-bars-bg-color-rgb: 19, 19, 19;
  --t4-bars-border-color: rgba(255, 255, 255, 0.1);
}
.md {
  --t4-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.5;
  --t4-bars-border-color: transparent;
  --t4-text-color: #212121;
}
.md .dark,
.md.dark {
  --t4-text-color: rgba(255, 255, 255, 0.87);
  --t4-bars-bg-color: #202020;
}
.aurora {
  --t4-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  --t4-line-height: 1.5;
  --t4-text-color: #000;
  --t4-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .dark,
.aurora.dark {
  --t4-text-color: #fff;
  --t4-bars-bg-color: #202020;
  --t4-bars-border-color: rgba(255, 255, 255, 0.1);
}