logo
 JavaScript >> Javascript-Tutorial >  >> Tags >> APP

Passen Sie Ihre Angular-Apps für Dual-Screen-Geräte mit ngx-foldable an

Faltbare und Dual-Screen-Geräte werden im Laufe der Zeit immer häufiger, aber Sie fragen sich vielleicht, ob es sich lohnt, Entwicklungszeit zu investieren, um diese Geräte zu unterstützen, insbesondere wenn die Erstellung vollständig reaktionsfähiger Web-Apps bereits eine Herausforderung darstellt. Die Verwendung der neuen CSS- und JavaScript-Grundelemente ist eine unterhaltsame Möglichkeit, die neuen Möglichkeiten zu entdecken und kennenzulernen, die Geräte wie das Surface Duo bieten. Möglicherweise suchen Sie jedoch nach einer effizienteren Möglichkeit, vorhandene Apps anzupassen, ohne drastische Änderungen vornehmen und auch tauchen zu müssen viel in benutzerdefiniertes CSS. Das werden wir hier untersuchen.

In diesem Beitrag werfen wir einen Blick darauf, wie Sie Angular verwenden können, um mit minimalen Änderungen an einer vorhandenen Codebasis ein faltbares Weberlebnis zu erstellen. Wir beginnen mit der Fotogalerie-Demo, erstellen eine Angular-Version davon und sehen dann, wie die Verwendung einer Angular-Bibliothek den Zugang zur faltbaren Anpassung erleichtert.

TL;DR Schlüssel zum Mitnehmen

Die Anpassung bestehender Apps an faltbare Geräte bedeutet nicht, dass Sie Ihr Design und Ihren Code komplett überdenken müssen. Mit der ngx-foldable-Bibliothek können Sie vorhandene Angular-Apps so anpassen, dass sie Dual-Screen-Geräte mit minimalen Änderungen an Ihrer App (und ohne CSS!) unterstützen. React-Foldable ist auch eine Alternative, wenn Sie mit React arbeiten, und ich bin sicher, dass ähnliche Bibliotheken irgendwann auch für andere Frameworks verfügbar sein werden.

Neuerstellung der Fotogalerie-Demo mit Angular

Ich wollte die Demo-App so einfach wie möglich halten, also habe ich die Angular-CLI verwendet, um das Projekt mit der minimalen Vorlage zu generieren:

ng new photo-gallery --minimal --prefix=pg --style=css --routing=false --strict

Es gibt uns eine gute Arbeitsbasis mit strenger Typprüfung und einzelnen Dateikomponenten, die perfekt zum Erstellen dieser Demo aussah. Ich werde hier nicht alle Details darüber behandeln, was ich getan habe, um die Demo neu zu erstellen, da ich größtenteils den vorhandenen JavaScript- und CSS-Code aus der ursprünglichen Fotogalerie-App genommen und in Angular-Komponenten eingefügt habe.

Den vollständigen Quellcode der Anwendung finden Sie auf GitHub, aber schauen wir uns die interessantesten Teile hier genauer an.

App-Komponente

Die Datei app.component.ts ist die Wurzelkomponente unserer Anwendung. Es enthält den Status, als welches Bild gerade ausgewählt ist, und alle Komponenten, aus denen unsere App besteht. Wenn Sie sich die Vorlage ansehen, können Sie einen Blick darauf werfen, wie unsere Anwendung funktioniert:

<pg-gallery [images]="images" (select)="setImage($event)"></pg-gallery>
<pg-fold></pg-fold>
<pg-details [image]="currentImage"></pg-details>
<pg-fullview
  [image]="currentImage"
  (close)="closeImage()"
  (previous)="previousImage($event)"
  (next)="nextImage($event)"
></pg-fullview>

Von dort aus können Sie sehen, dass unsere App aus 4 Hauptkomponenten besteht:

  • Galerie :eine scrollbare Liste von Vorschaubildern
  • Falten :ein Platzhalter für den Platz, den der Faltbereich auf Dual-Screen-Geräten einnimmt
  • Einzelheiten :zeigt die vergrößerte Version des ausgewählten Bildes mit seiner Beschreibung auf Dual-Screen-Geräten
  • Vollansicht :Zeigt das ausgewählte Bild auf Einzelbildschirmgeräten im Vollbildmodus an

Die App Die Komponente enthält auch einige Stile, um diese Komponenten abhängig von der Gerätekonfiguration anzuordnen:

:host {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

@media (screen-spanning: single-fold-vertical) {
  :host { flex-direction: row; }
}

@media (screen-spanning: single-fold-horizontal) {
  :host { flex-direction: column-reverse; }
}

@media (screen-spanning: none) {
  :host { flex-direction: row; }
}

Hier verwenden wir spezifische Medienabfragen, um das Layout an eine Konfiguration mit zwei Bildschirmen anzupassen. Sie werden sehen, dass diese Medienabfragen auch in den anderen Komponenten verwendet werden, um sie zu verstecken oder anzuzeigen und ihr Design für jede Konfiguration anzupassen, also lassen Sie uns einen genaueren Blick darauf werfen.

Komponenten Fold, Details und Fullview

Diese drei Komponenten werden verwendet, um unterschiedliche Dinge anzuzeigen, je nachdem, auf welchem ​​​​Gerät es ausgeführt wird. Der Vollbildmodus Komponente wird nur auf Geräten mit einem Bildschirm verwendet, während die Fold und Details Komponenten werden auf Dual-Screen-Geräten verwendet. 

import { Component } from '@angular/core';

@Component({
  selector: 'pg-fold',
  template: `<div class="fold"></div>`,
  styles: [
    `
      .fold {
        height: 0;
        width: 0;
        background-size: 40px 40px;
        background-color: #737373;
        background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
        );
      }

      @media (screen-spanning: single-fold-vertical) {
        .fold {
          height: env(fold-height);
          width: env(fold-width);
        }
      }

      @media (screen-spanning: single-fold-horizontal) {
        .fold {
          height: env(fold-height);
          width: env(fold-width);
        }
      }
    `,
  ],
})
export class FoldComponent {}

Sie können hier sehen, dass standardmäßig das Fold Die Komponente wird ausgeblendet (Höhe und Breite auf 0 gesetzt) ​​und mit unterschiedlichen Größen sichtbar gemacht, wenn ein Dual-Screen-Gerät verwendet wird. Die Details Komponente verwendet einen ähnlichen Ansatz. Die Vollansicht Die Komponente macht das Gegenteil, indem sie sich versteckt, wenn ein Dual-Screen-Gerät erkannt wird, mit dieser Medienabfrage:

@media (screen-spanning: single-fold-horizontal),
       (screen-spanning: single-fold-vertical) {
  .container {
    display: none;
  }
}

Damit haben wir die Hauptprinzipien hinter der Anpassung der ursprünglichen Fotogalerie behandelt. Den vollständigen Quellcode für diese Version können Sie hier einsehen.

Aber wir haben die Angular-Funktionen hier nicht wirklich gut genutzt, da wir alle Komponenten einbeziehen, ob sie benötigt werden oder nicht, und CSS verwenden, um sie ein- oder auszublenden. Wir mussten auch zusätzliches CSS mit bestimmten Medienabfragen verwenden, was bedeutet, dass mehr Arbeit erforderlich war, um diese Demo zu erstellen. Dies ist hier möglicherweise kein Problem, da unsere Demo ziemlich einfach bleibt, aber in komplexeren Anwendungen könnte dies zu einer verringerten Leistung aufgrund unnötiger Komponentenwiedergabe und zu Wartungsproblemen aufgrund des verstreuten CSS-Ansatzes führen.

Einführung von ngx-foldable

Die Angular-Bibliothek ngx-foldable wurde speziell entwickelt, um die Anpassung von Angular-Anwendungen bei minimalen Änderungen an Ihrem Code zu ermöglichen. Es stellt Anweisungen und Dienste bereit, um auf Bildschirmkontextinformationen zuzugreifen und automatisch auf Änderungen zu reagieren.

Wir installieren es mit npm install ngx-foldable und importieren Sie dann die FoldableModule in unsere App:

import { FoldableModule } from 'ngx-foldable';

@NgModule({
  imports: [
    FoldableModule
    ...
  ],
  ...
})
export class AppModule {}

Überarbeitung der App-Komponente

Wenn die Bibliothek eingerichtet ist, können wir jetzt den bereitgestellten fdSplitLayout verwenden , fdWindow und fdIfSpan Anweisungen zum Neuerstellen unserer App-Komponentenvorlage:

<div fdSplitLayout="flex reverse">
  <pg-gallery fdWindow="0" [images]="images" (select)="setImage($event)"></pg-gallery>
  <pg-details fdWindow="1" *fdIfSpan="'multi'" [image]="currentImage"></pg-details>
  <pg-fullview
    *fdIfSpan="'none'"
    [image]="currentImage"
    (close)="closeImage()"
    (previous)="previousImage($event)"
    (next)="nextImage($event)"
  ></pg-fullview>
</div>

Zunächst werden Sie feststellen, dass wir einen Top-<div> hinzugefügt haben Container mit der Direktive fdSplitLayout . Diese Anweisung ermöglicht es uns, ein geteiltes Layout auf Geräten mit zwei Bildschirmen zu erstellen, ohne dass zusätzliches CSS erforderlich ist. Der erste Parameter ermöglicht die Auswahl, welche Art von CSS-Layout Sie verwenden möchten, also verwenden wir flex hier. Andere mögliche Optionen sind grid oder absolute , um besser zu Ihrem vorhandenen App-Layout zu passen. Mit dem zweiten Parameter können Sie wählen, ob Sie reverse möchten die Reihenfolge der Fenstersegmente, wenn sich die Spannweite (dh die Ausrichtung) ändert, oder behalten Sie die normal bei bestellen.

Als nächstes werden Sie feststellen, dass wir den fdWindow hinzugefügt haben Direktive zur Galerie und Details Komponenten. Dieser ermöglicht es Ihnen, einem Fenstersegment im Dual-Screen-Modus eine bestimmte Komponente zuzuweisen, und funktioniert nur innerhalb eines fdSplitLayout container-Element.

Der beste Teil von fdSplitLayout und fdWindow Richtlinien lauten, dass sie nur auf Geräten mit zwei Bildschirmen aktiviert werden, sodass absolut kein CSS hinzugefügt wird, wenn die App auf einem Gerät mit einem Bildschirm ausgeführt wird.

Beachten Sie, dass wir auch die Falte losgeworden sind Komponente, da sie nicht mehr benötigt wird.

Schließlich haben wir den fdIfSpan verwendet strukturelle Direktive zum Ein-/Ausblenden der Details und Vollansicht Komponenten je nach Kontext. Diese Direktive funktioniert genauso wie ngIf , außer dass es mit vordefinierten Bedingungen verknüpft ist, die sich auf den aktuellen Bildschirmkontext beziehen.

*fdIfSpan="'multi'" bedeutet, dass die Details Die Komponente wird nur in einem Kontext mit mehreren Bildschirmen an das DOM angehängt, unabhängig von der Ausrichtung des Geräts. Die Vollansicht Komponente verwendet den entgegengesetzten Wert 'none' , was bedeutet, dass es nur auf Geräten mit einem Bildschirm vorhanden ist. Beachten Sie, dass wir auch den else hätten verwenden können Syntax, genau wie ein normaler ngIf .

Andere mögliche Bedingungen sind 'fold-vertical' und 'fold-horizontal' , wenn Sie auf eine bestimmte Ausrichtung abzielen müssen.

Mit diesen drei Direktiven können wir jetzt ALLE spezifischen CSS entfernen, die sich auf die Single/Dual-Screen-Anpassung beziehen. Ja, du hast richtig gelesen. Damit wird das neue CSS für unsere App-Komponente einfach zu:

:host {
  width: 100vw;
  height: 100vh;
}

Weniger Code am Ende, bessere Performance und keine Notwendigkeit für spezifisches CSS, klingt hier nach einem Gewinn? 🙂

Sie können die endgültige Web-App hier sehen.

Weiter gehen

Wir haben gesehen, wie wir die Handhabung der Geräteanpassung abstrahieren und eine übergeordnete API mit Angular bereitstellen können. Obwohl es immer interessant ist, einen Blick auf die CSS-Grundelemente dahinter zu werfen, möchten wir manchmal einfach einen einfacheren Weg, um unsere Absicht zu erreichen. Das ist auch der Grund, warum CSS-Bibliotheken wie Bootstrap und Tailwind CSS so beliebt sind, um schnell responsive Designs zu erstellen.

Sie können sich den endgültigen Code der App und die Details der Änderungen ansehen, wenn Sie die ngx-faltbare Bibliothek verwenden.

Wenn Sie neugierig sind, können Sie auch in den Code hinter ngx-foldable eintauchen und sehen, wie es funktioniert. Auch Beiträge sind willkommen 😉.

Folgen Sie mir auf Twitter, ich würde gerne Ihre Vorschläge diskutieren und annehmen!