Ein grundlegender Überblick über das Erstellen einer Tab-Komponente, die denen in iOS- und Android-Apps ähnelt.
In diesem Beitrag geht es um die Entwicklung einer Tabs-Komponente für das Web. responsiv, unterstützt die Eingabe mehrerer Geräte und funktioniert browserübergreifend. Demo ansehen
<ph type="x-smartling-placeholder">Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Registerkarten sind eine gängige Komponente von Designsystemen, können aber viele Formen
zu erstellen. Zuerst wurden Desktop-Tabs auf dem <frame>
-Element erstellt und jetzt
spezielle mobile Komponenten, die Inhalte basierend auf physikalischen Eigenschaften animieren.
Alle haben dasselbe Ziel: Platz zu sparen.
Das Wichtigste für die User Experience von Tabs ist heute ein Schaltflächennavigationsbereich die die Sichtbarkeit von Inhalten in einem Anzeigeframe ein- und ausschalten. Viele verschiedene Content-Bereiche den gleichen Raum, werden aber basierend auf dem Schaltfläche ausgewählt.
<ph type="x-smartling-placeholder">Webtaktik
Insgesamt fand ich diese Komponente recht einfach, dank einer einige wichtige Webplattformfunktionen:
scroll-snap-points
für elegante Wisch- und Tastaturinteraktionen mit geeignete Positionen für Scroll-Stopps- Deeplinks über URL-Hashes für Unterstützung für Scroll-Anker und -Freigabe auf der Seite
- Screenreader-Unterstützung mit
<a>
- undid="#hash"
-Element-Markup prefers-reduced-motion
zum Aktivieren von Crossfade-Übergängen und Instant-Funktion In-Page-Scrollen- Die Webfunktion „
@scroll-timeline
“ im Entwurf zum dynamischen Unterstreichen und Farbe des ausgewählten Tabs ändern
Im HTML-Code
Im Grunde sieht das UX-Design folgendermaßen aus: auf einen Link klicken, die URL muss den verschachtelten Seitenstatus. Der Inhaltsbereich wird aktualisiert, wenn im Browser zum übereinstimmenden Element.
Darin sind einige Mitglieder für strukturelle Inhalte enthalten: Links und :target
s. Mi.
eine Liste mit Links, für die ein <nav>
gut geeignet ist, und eine Liste mit <article>
Elemente, für die ein <section>
gut geeignet ist. Jeder Link-Hash stimmt mit einem Abschnitt überein,
sodass der Browser durch Anker scrollen kann.
Wenn Sie beispielsweise auf einen Link klicken, wird der Artikel :target
automatisch
Chrome 89, kein JS erforderlich Die Nutzenden können dann durch den Artikelinhalt scrollen,
wie immer ihr Eingabegerät. Es handelt sich um ergänzende Inhalte, wie in den
Markup.
Ich habe das folgende Markup verwendet, um die Tabs zu organisieren:
<snap-tabs>
<header>
<nav>
<a></a>
<a></a>
<a></a>
<a></a>
</nav>
</header>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</snap-tabs>
Ich kann Verbindungen zwischen den Elementen <a>
und <article>
herstellen mit
href
- und id
-Properties:
<snap-tabs>
<header>
<nav>
<a href="#responsive"></a>
<a href="#accessible"></a>
<a href="#overscroll"></a>
<a href="#more"></a>
</nav>
</header>
<section>
<article id="responsive"></article>
<article id="accessible"></article>
<article id="overscroll"></article>
<article id="more"></article>
</section>
</snap-tabs>
Dann füllte ich die Artikel mit einer Menge Lorem und die Links Titel mit unterschiedlicher Länge und Bildern. Mit den Inhalten, mit denen wir arbeiten können, Layout.
Scroll-Layouts
In dieser Komponente gibt es drei verschiedene Arten von Scrollbereichen:
- Die Navigationsleiste (pink) ist horizontal. scrollbar
- Der Inhaltsbereich (blau) ist horizontal. scrollbar
- Jeder Artikelartikel (grün) steht vertikal. scrollbar sind.
Beim Scrollen gibt es zwei verschiedene Arten von Elementen:
- Ein Fenster
Ein Feld mit definierten Abmessungen, das das Elementoverflow
Eigenschaftsstil. - Eine zu große Oberfläche
Bei diesem Layout sind das die Containerliste: nav Links, Bereichsartikel und Artikelinhalte.
Layout: <snap-tabs>
Das von mir gewählte Layout der obersten Ebene war Flex (Flexbox). stelle ich die Richtung auf
column
, sodass die Überschrift und der Abschnitt vertikal angeordnet sind. Dies ist unser erstes
und alles mit ausgeblendetem Überlauf wird ausgeblendet. Die Überschrift und
verwendet bald Overscroll als einzelne Zonen.
<snap-tabs> <header></header> <section></section> </snap-tabs>
snap-tabs { display: flex; flex-direction: column; /* establish primary containing box */ overflow: hidden; position: relative; & > section { /* be pushy about consuming all space */ block-size: 100%; } & > header { /* defend againstneeding 100% */ flex-shrink: 0; /* fixes cross browser quarks */ min-block-size: fit-content; } }
Zurück zum bunten Diagramm mit 3 Scrollen:
<header>
wird jetzt (rosa) Scroll-Container.<section>
ist bereit, die Schriftrolle in (blau) zu sein Container.
Die von mir hervorgehobenen Frames VisBug hilft uns dabei, die Fenster des die Scroll-Container erstellt haben.
Layout der Tabs <header>
Das nächste Layout ist fast gleich: Ich verwende Flex, um eine vertikale Reihenfolge zu erstellen.
<snap-tabs> <header> <nav></nav> <span class="snap-indicator"></span> </header> <section></section> </snap-tabs>
header { display: flex; flex-direction: column; }
.snap-indicator
sollte sich zusammen mit der Gruppe der Links horizontal bewegen.
mithilfe dieses Header-Layouts
einen Rahmen schaffen. Hier gibt es keine absolut positionierten Elemente!
Als Nächstes die Scrollstile. Es stellt sich heraus, dass wir die Scrollstile
zwei horizontalen Scroll-Bereichen (Kopfzeile und Abschnitt) bewegen.
Klasse, .scroll-snap-x
.
.scroll-snap-x {
/* browser decide if x is ok to scroll and show bars on, y hidden */
overflow: auto hidden;
/* prevent scroll chaining on x scroll */
overscroll-behavior-x: contain;
/* scrolling should snap children on x */
scroll-snap-type: x mandatory;
@media (hover: none) {
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
Jede benötigt einen Überlauf auf der x-Achse, Scroll-Begrenzungen, um Overscroll einzufangen, ausgeblendet. Scrollleisten für Geräte mit Touchscreen und Scroll-Snap zum Sperren von Inhalten Präsentationsbereichen. Unsere Tastatur-Tab-Reihenfolge ist zugänglich und jede Interaktionsanleitung natürlich konzentrieren. Scroll-Snap-Container erhalten auch ein schönes Karussell. über die Tastatur interagieren können.
Layout der Tab-Kopfzeile <nav>
Die Navigationslinks müssen in einer Zeile ohne Zeilenumbrüche dargestellt werden, und zwar vertikal. zentriert und jedes Linkelement sollte am Behälter für Scroll-Snap einrasten. Swift für das Preisvergleichsportal 2021!
<nav> <a></a> <a></a> <a></a> <a></a> </nav>
nav { display: flex; & a { scroll-snap-align: start; display: inline-flex; align-items: center; white-space: nowrap; } }
Jeder Link wird jeweils mit einem Stil und einer Größe versehen, sodass im Navigationslayout Richtung und Fluss. Eindeutige Breiten von Navigationselementen sorgen für den Wechsel zwischen Tabs. die Breite des Indikators an das neue Ziel anpasst. Je nachdem, wie viele Elemente vorhanden sind, rendert der Browser eine Bildlaufleiste oder nicht.
Layout der Tabs <section>
Dieser Abschnitt ist ein flexibles Element und muss der dominante Nutzer des Speicherplatzes sein. Es
Außerdem müssen Spalten erstellt werden, in denen die Artikel platziert werden sollen. Noch einmal schnell
für das Preisvergleichsportal 2021! Mit block-size: 100%
wird dieses Element gestreckt, um den
möglichst übergeordnete Elemente, dann erstellt sie für ein eigenes Layout eine Reihe von
Spalten, die 100%
der Breite des übergeordneten Elements entsprechen. Prozentsätze funktionieren hier gut.
da wir starke Beschränkungen für das übergeordnete Element geschrieben haben.
<section> <article></article> <article></article> <article></article> <article></article> </section>
section { block-size: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
Das Ergebnis ist „vertikal so weit wie möglich und aufdringlich maximieren“.
(Denken Sie an den Header „flex-shrink: 0
“, der eine Abwehrmaßnahme gegen
Erweiterungs-Push), wodurch die Zeilenhöhe für einen Satz von Spalten mit voller Höhe festgelegt wird. Die
Mit dem Stil auto-flow
wird vom Raster festgelegt, dass die Kinder immer horizontal angeordnet sind
kein Zeilenumbruch, genau das, was wir wollen. damit das übergeordnete Fenster überläuft.
Manchmal finde ich solche Sachen manchmal schwierig. Dieses Abschnittselement ist die in einen Karton passen, aber auch eine Reihe von Kartons kreierten. Ich hoffe, dass die visuellen Elemente Erklärungen helfen.
Layout der Tabs <article>
Der Nutzer sollte durch den Artikelinhalt scrollen können und die Bildlaufleisten sollten wenn es einen Überlauf gibt. Diese Artikelelemente befinden sich . Sie sind gleichzeitig ein übergeordnetes Element für das Scrollen und ein untergeordnetes Element vom Typ „Scrollen“. Die handhabt der Browser einige knifflige Berührungs-, Maus- und Tastaturinteraktionen. für uns.
<article> <h2></h2> <p></p> <p></p> <h2></h2> <p></p> <p></p> ... </article>
article { scroll-snap-align: start; overflow-y: auto; overscroll-behavior-y: contain; }
Ich habe mich dafür entschieden, dass die Artikel im übergeordneten Scroller erscheinen. Mir gefällt wie die Navigationslinkelemente und die Artikelelemente am Inline-Start- der jeweiligen Scroll-Container. Sie sieht aus wie ein harmonisches Beziehung.
Der Artikel ist ein untergeordnetes Raster, dessen Größe vorab als Darstellungsbereich festgelegt ist. Bereich, den wir für Scroll-UX bieten. Das heißt, ich brauche keine Höhe oder Breite Stile hier, muss ich nur definieren, wie es überläuft. Ich habe „overflow-y“ auf „auto“ gesetzt. und die Scroll-Interaktionen mit dem praktischen Overscroll-Verhalten Property.
Zusammenfassung der 3 Scrollbereiche
Unten habe ich in meinen Systemeinstellungen die Option "Bildlaufleisten immer anzeigen" ausgewählt. Ich glaube ist es doppelt wichtig, dass das Layout funktioniert, wenn diese Einstellung aktiviert ist, da sie das Layout und die Scroll-Orchestrierung zu überprüfen.
Ich denke, die Bildlaufleiste in dieser Komponente zeigt deutlich, die Scrollbereiche, die unterstützte Richtung und die Art und Weise, wie sie mit sich gegenseitig helfen. Überlegen Sie, wie jeder dieser Scroll-Fenster-Frames die übergeordneten Elemente des Rasters zu einem Layout.
Mit den Entwicklertools lässt sich dies visualisieren:
<ph type="x-smartling-placeholder">Die Scroll-Layouts sind vollständig: Andocken, Deeplink möglich und Tastatur. zugänglich zu machen. Starke Grundlage für UX-Verbesserungen, Stil und Spaß
Funktionshighlight
Beim Scrollen fixierte untergeordnete Elemente behalten ihre Sperrposition während der Größenänderung. Das bedeutet, JavaScript muss beim Drehen des Geräts oder im Browser nichts sichtbar machen. die Größe anpassen. In den Chromium-Entwicklertools ausprobieren Gerät Modus von Sie wählen einen anderen Modus als Responsiv aus und passen dann die Größe des Geräterahmens an. Beachten Sie, dass das Element sichtbar und mit seinem Inhalt gesperrt bleibt. Dies wurde verfügbar, seit Chromium die Implementierung entsprechend der Spezifikation aktualisiert hat. Hier finden Sie Blogpost dazu
Animation
Das Ziel der Animationsarbeit ist es, Interaktionen klar mit der Benutzeroberfläche zu verknüpfen. Feedback geben. Dies hilft den Nutzenden dabei, zu ihrem (hoffentlich) dass alle Inhalte nahtlos gefunden werden können. füge ich Bewegung zielführend hinzu, bedingt. Nutzer können jetzt Bewegungen Betriebssystemeinstellungen und es macht mir viel Spaß, auf die Wünsche der Nutzer einzugehen.
Ich werde eine Tab-Unterstrich mit der Scrollposition des Artikels verknüpfen. Ein Andocken ist nicht
sondern auch den Anfang und das Ende
einer Animation verankert.
Dadurch bleibt die <nav>
erhalten, die als
mini-map, mit dem Inhalt verknüpft.
Wir überprüfen die Bewegungseinstellungen des Nutzers sowohl in CSS als auch in JS. Es gibt eine
ein paar großartige Orte, um Rücksicht zu nehmen!
Scrollverhalten
Es besteht die Möglichkeit, das Bewegungsverhalten von :target
und
element.scrollIntoView()
. Standardmäßig erfolgt die Suche sofort. Der Browser legt lediglich die
Scrollposition Was ist, wenn wir zu dieser Scrollposition wechseln möchten,
anstatt dort zu blinzeln?
@media (prefers-reduced-motion: no-preference) {
.scroll-snap-x {
scroll-behavior: smooth;
}
}
Wir führen hier Bewegungen ein, also Bewegungen, die nicht gesteuert werden können, wie Scrollen, wird dieser Stil nur angewendet, wenn der Nutzer Bewegungen des Betriebssystems zu reduzieren. So wird nur das Scrollen für Menschen, die damit einverstanden sind.
Tab-Anzeige
Diese Animation soll dazu beitragen, den Indikator mit dem Status zu verknüpfen.
des Inhalts. Ich habe beschlossen, border-bottom
-Stile für Nutzer farbig zu überblenden
die reduzierte Bewegungen und eine Scroll-Link-Animation mit Gleit- und Farbausblendung bevorzugen.
für Nutzende,
die kein Problem mit Bewegung haben.
In den Chromium-Entwicklertools kann ich die Einstellung ändern und die beiden unterschiedliche Übergangsstile. Es hat mir viel Spaß gemacht, das zu bauen.
@media (prefers-reduced-motion: reduce) {
snap-tabs > header a {
border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
transition: color .7s ease, border-color .5s ease;
&:is(:target,:active,[active]) {
color: var(--text-active-color);
border-block-end-color: hsl(var(--accent));
}
}
snap-tabs .snap-indicator {
visibility: hidden;
}
}
Ich blende das .snap-indicator
aus, wenn der Nutzer weniger Bewegung bevorzugt, weil ich
nicht mehr benötigen. Dann ersetze ich ihn durch border-block-end
-Stile und einen
transition
. In der Tab-Interaktion ist außerdem zu sehen, dass das aktive Navigationselement
nur marken unterstrichen ist, aber die Schriftfarbe ist dunkler. Die
Das aktive Element hat einen höheren Textfarbkontrast und einen hellen Unterlichtakzent.
Mit ein paar zusätzlichen CSS-Zeilen fühlt sich jemand gesehen (in dem Sinne, berücksichtigen wir ihre Bewegungspräferenzen. Ich liebe das.
@scroll-timeline
Im obigen Abschnitt habe ich Ihnen gezeigt, wie ich die Überblendung bei geringer Bewegung handhabe. und in diesem Abschnitt zeige ich Ihnen, wie ich den Indikator und ein scrollen. Als Nächstes geht es um experimentelle Funktionen. Ich hoffe, Sie sind so aufgeregt wie ich.
const { matches:motionOK } = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
);
Zuerst überprüfe ich die Bewegungseinstellungen des Nutzers in JavaScript. Wenn das Ergebnis von
false
, d. h., der Nutzer bevorzugt kleinere Bewegungen. In diesem Fall wird keine
der Bewegungseffekte zum Scrollen.
if (motionOK) {
// motion based animation code
}
Zum Zeitpunkt der Erstellung dieses Dokuments war die Browserunterstützung für
@scroll-timeline
ist kein Wert. Es ist ein
Entwurfsspezifikation nur mit
experimentelle Implementierungen. Es hat jedoch einen Polyfill, das ich hier
.
ScrollTimeline
Zwar können mit CSS und JavaScript Scrollzeitachsen erstellt werden, JavaScript verwenden, damit ich in der Animation Messungen von Live-Elementen verwenden kann.
const sectionScrollTimeline = new ScrollTimeline({
scrollSource: tabsection, // snap-tabs > section
orientation: 'inline', // scroll in the direction letters flow
fill: 'both', // bi-directional linking
});
Eine Sache soll der Scrollposition einer anderen folgen.
ScrollTimeline
Ich definiere den Treiber des Scroll-Links, scrollSource
.
Normalerweise läuft eine Animation im Web im Vergleich zu einem globalen Zeitrahmen-Tick, aber mit
ein benutzerdefiniertes sectionScrollTimeline
im Speicher, kann ich das alles ändern.
tabindicator.animate({
transform: ...,
width: ...,
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
Bevor ich zu den Keyframes der Animation komme, denke ich,
den Follower des Scrollens darauf hinweisen, tabindicator
, basierend auf
auf einer benutzerdefinierten Zeitachse, das Scrollen unseres Abschnitts. Damit ist die Verknüpfung fertig,
bei denen die letzte Zutat fehlt, also zustandsorientierte Punkte, zwischen denen die Animation erfolgen kann.
Keyframes hinzufügen.
Dynamische Keyframes
Es gibt eine leistungsstarke, rein deklarative CSS-Art,
@scroll-timeline
, aber die von mir ausgewählte Animation war zu dynamisch. Es gibt keine
kann zwischen der Breite von auto
übergangen werden und es gibt keine Möglichkeit,
basierend auf der Länge der untergeordneten Elemente
eine Reihe von Keyframes erstellen.
Da JavaScript weiß, wie diese Informationen abgerufen werden, iterieren wir die Kinder selbst und rufen die berechneten Werte zur Laufzeit ab:
tabindicator.animate({
transform: [...tabnavitems].map(({offsetLeft}) =>
`translateX(${offsetLeft}px)`),
width: [...tabnavitems].map(({offsetWidth}) =>
`${offsetWidth}px`)
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
Destrukturieren Sie für jeden tabnavitem
die offsetLeft
-Position und geben Sie einen String zurück.
bei dem es als translateX
-Wert verwendet wird. Dadurch werden vier Keyframes für die Transformation
Animation. Das Gleiche wird für die Breite gemacht. Bei jedem wird die dynamische Breite abgefragt.
und als Keyframe-Wert verwendet.
Hier ist ein Ausgabebeispiel, das auf meinen Schriftarten und Browsereinstellungen basiert:
TranslateX-Keyframes:
[...tabnavitems].map(({offsetLeft}) =>
`translateX(${offsetLeft}px)`)
// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
Breiten-Keyframes:
[...tabnavitems].map(({offsetWidth}) =>
`${offsetWidth}px`)
// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]
Um die Strategie zusammenzufassen, wird der Tab-Indikator jetzt über vier Keyframes hinweg animiert. abhängig von der Scroll-Snap-Position des Abschnitts-Scrollers. Die Snap-Points deutliche Abgrenzungen zwischen unseren Keyframes erzeugen und die Synchronisierung der Animation.
Der Nutzer steuert die Animation durch seine Interaktion und sieht dabei die Breite und ändert sich die Position des Indikators von einem Abschnitt zum nächsten. ganz einfach durch Scrollen.
Vielleicht haben Sie es noch nicht bemerkt, aber ich bin sehr stolz auf den Farbübergang markiertes Navigationselement ausgewählt wird.
Das nicht ausgewählte helle Grau erscheint noch weiter nach unten verschoben, wenn die hervorgehobene kontrastreicher. Eine Übergangsfarbe für Text, z. B. wenn der Mauszeiger darauf bewegt wird, und wenn ausgewählt, geht es beim Scrollen weiter, damit die Farbe mit dem Unterstrich synchronisiert.
Gehen Sie dazu folgendermaßen vor:
tabnavitems.forEach(navitem => {
navitem.animate({
color: [...tabnavitems].map(item =>
item === navitem
? `var(--text-active-color)`
: `var(--text-color)`)
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
});
Für jeden Navigationslink in einem Tab ist diese neue Farbanimation erforderlich, mit der dasselbe Scrollen als Unterstrich markieren. Ich verwende dieselbe Zeitachse wie zuvor: beim Scrollen ein Tick ausgibt, können wir diese Markierung die gewünschte Animation. Wie zuvor erstelle ich vier Keyframes in der Schleife und kehre Farben.
[...tabnavitems].map(item =>
item === navitem
? `var(--text-active-color)`
: `var(--text-color)`)
// results in 4 array items, which represent 4 keyframe states
// [
"var(--text-active-color)",
"var(--text-color)",
"var(--text-color)",
"var(--text-color)",
]
Der Keyframe mit der Farbe var(--text-active-color)
markiert den Link und
ansonsten eine Standardtextfarbe. Die verschachtelte Schleife sorgt dafür,
da die äußere Schleife jedes Navigationselement und die innere Schleife
persönlichen Keyframes von navitem. Ich prüfe, ob das äußere Schleifenelement dasselbe wie
die innere Schleife ein und erkennen, wann sie ausgewählt ist.
Es hat mir viel Spaß gemacht. Sehr.
Noch mehr JavaScript-Verbesserungen
Ich möchte Sie noch einmal daran erinnern, dass der Kern dessen, was ich Ihnen hier zeige, JavaScript Sehen wir uns nun an, wie wir dies verbessern können, wenn JS verfügbar.
Deeplinks
Deeplinks sind eher ein mobiler Begriff. Ich glaube aber, dass der Deeplink
gibt es hier Tabs, mit denen Sie eine URL direkt zum Inhalt eines Tabs teilen können. Die
navigiert der Browser zu der ID, die mit dem URL-Hash übereinstimmt. gefunden
Dieser onload
-Handler hat den Effekt plattformübergreifend angewendet.
window.onload = () => {
if (location.hash) {
tabsection.scrollLeft = document
.querySelector(location.hash)
.offsetLeft;
}
}
Scroll-Ende-Synchronisierung
Unsere Nutzer klicken oder verwenden nicht ständig die Tastatur, manchmal ungestört scrollen können. Wenn das Scrollen für den Abschnitt anhält wo er landet, muss in der oberen Navigationsleiste entsprechend angepasst werden.
So warte ich auf das Scroll-Ende:
js
tabsection.addEventListener('scroll', () => {
clearTimeout(tabsection.scrollEndTimer);
tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
});
Löschen Sie beim Scrollen durch die Abschnitte das Abschnitts-Timeout, sofern vorhanden. und starte eine neue. Löschen Sie das Zeitlimit nicht, und nach einer Ruhepause 100 ms ausgelöst. Wenn sie ausgelöst wird, rufen Sie eine Funktion auf, die versucht, wo der Nutzer aufgehört hat.
const determineActiveTabSection = () => {
const i = tabsection.scrollLeft / tabsection.clientWidth;
const matchingNavItem = tabnavitems[i];
matchingNavItem && setActiveTab(matchingNavItem);
};
Unter der Annahme, dass die Schriftrolle angedockt ist, wird die aktuelle Scrollposition von der Breite geteilt. des Bildlaufbereichs sollte eine Ganzzahl und keine Dezimalzahl sein. Dann versuche ich, über diesen berechneten Index ein Navitem aus unserem Cache abrufen sende ich die Übereinstimmung zum Aktivieren.
const setActiveTab = tabbtn => {
tabnav
.querySelector(':scope a[active]')
.removeAttribute('active');
tabbtn.setAttribute('active', '');
tabbtn.scrollIntoView();
};
Das Festlegen des aktiven Tabs beginnt mit dem Löschen aller aktuell aktiven Tabs und
das eingehende Navigationselement
das aktive Statusattribut. Der Aufruf von scrollIntoView()
eine unterhaltsame
Interaktion mit CSS ist.
.scroll-snap-x {
overflow: auto hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
Im CSS-Dienstprogramm „Horizontal Scroll Snap“
verschachtelt eine Medienabfrage
smooth
beim Scrollen, wenn der Nutzer bewegungstolerant ist. JavaScript kann frei
um Elemente sichtbar zu machen, und CSS kann die UX deklarativ verwalten.
Ziemlich entzückende kleine Matches, die manchmal passen.
Fazit
Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Das macht Spaß Komponentenarchitektur. Wer erstellt die erste Version mit Plätzen bevorzugten Framework? 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Glitch erstellen, Tweet an mich senden und füge sie den Community-Remixen hinzu. weiter unten.
Community-Remixe
- @devnook, @rob_dodson und @DasSurma mit Webkomponenten: Artikel.
- @jhvanderschee mit Schaltflächen: Codepen