Flyout
Das Flyout ist eine spezielle und nicht-modale Art eines Kontextmenüs. Wenn der Benutzer mit der Maus über ein bestimmtes Element (einen Menüpunkt) fährt, klappt ein Untermenü aus.
Voraussetzung
Nicht-modale Dialoge werden mit Hilfe der Popover API behandelt. Alle gängigen Browser unterstützen diese.
Ich gehe zudem 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
Das Flyout wird über die CSS-Klasse flyout behandelt. Inhaltlich unterscheidet sich der Style nicht vom Kontextmenü.
dialog.flyout[data-dialog-arrow] {
margin: 0;
overflow: visible;
&::backdrop {
opacity: 0;
}
&::after {
box-shadow: color-mix(in oklab, var(--text-color), transparent 50%) -0.4rem 0.4rem 0.4rem;
border: 1rem solid transparent;
border-color: transparent transparent var(--default2-color) var(--default2-color);
transform-origin: 0 0;
transform: rotate(135deg);
left: 3.2rem;
content: '';
position: absolute;
width: 0;
height: 0;
margin-top: 0.1rem;
box-sizing: border-box;
display: block;
}
&[data-dialog-arrow='bottom-left']::after {
border-color: transparent transparent var(--bg-color) var(--bg-color);
bottom: -2.6rem;
transform-origin: -2.4rem 3.2rem;
transform: rotate(315deg);
}
&[data-dialog-arrow='top-right']::after {
border-color: transparent transparent var(--default2-color) var(--default2-color);
left: auto;
right: -1.6rem;
}
&[data-dialog-arrow='bottom-right']::after {
border-color: transparent transparent var(--bg-color) var(--bg-color);
left: auto;
right: -1.6rem;
bottom: -2.6rem;
transform-origin: -2.4rem 3.2rem;
transform: rotate(315deg);
}
.dialogContent {
resize: none;
}
}
Alle weiteren Styles können vom Standard-Dialog geerbt werden.
Dialoginhalt erstellen
Das HTML für das Flyout unterscheidet sich nur durch die class="flyout" vom Standard-Dialog.
<dialog class="flyout">
<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 steuern
Die das Flyout aufrufende Menüpunkte sind mit einem onmouseover-Event zu versehen. Dieser löst den focus- und click-Event aus.
<button data-dialog-target="~dialogFlyout" onmouseover="this.focus(); this.click();">Flyout öffnen</button>
Dialog testen
Damit ist bereits alles Notwendige getan. Alles Weitere übernimmt die dialog.js. Wir können den Flyout-Dialog also gleich testen.
Modale Variante
Eine modale Variante des Flyouts ist das Kontextmenü. Möglicherweise scheint dir dies geeigneter.
Dran bleiben
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.