Slider
Der Slider schiebt sich von rechts in die Seite und nimmt die gesamte Höhe ein, während links immer etwas Hintergrund sichtbar bleibt. Bei gestapelten Sliders ist links noch etwas des direkt darunterliegenden Sliders sichtbar.
Voraussetzung
Ich gehe davon aus, dass du das HTML und das Javascript gemäss der Dialoge-Anleitung eingrichtet hast. Insbesondere die dialog.js übernimmt hier einen massgeblichen Anteil.
Dialog stylen
Der Slider wird über die CSS-Klasse slide behandelt.
dialog.slide {
min-width: clamp(28rem, 24vw, 64rem);
max-width: calc(80vw - 0.8rem);
height: 100dvh;
max-height: 100dvh;
margin: 0 0 0 auto;
border-radius: 0;
&[open] {
transform: translateX(0);
transition: transform 0.2s ease-out;
@starting-style {
transform: translateX(100%);
}
&:not(:last-of-type) {
transform: translateX(-20%);
}
}
.dialogHeader {
border-radius: 0;
}
.dialogContent {
resize: horizontal;
flex-grow: 1;
}
}
Alle weiteren Styles können vom Standard-Dialog geerbt werden.
Dialoginhalt erstellen
Das HTML für den Slider-Dialog unterscheidet sich nur durch die class="slide" vom Standard-Dialog.
<dialog class="slide">
<header class="dialogHeader">
<p>Beispiel;</p>
<button class="icon icon-close" data-dialog-close="1" title="Dialog schliesssen"></button>
</header>
<div class="dialogContent">
<p>Das ist ein Dialog.</p>
</div>
</dialog>
Dialog testen
Damit ist bereits alles Notwendige getan. Alles Weitere übernimmt die dialog.js. Wir können den Slider-Dialog also gleich testen.
Dran bleiben
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.