Hoppa till innehållet
Inställningar:

Överlägg

Alla fyra bygger på en plattformsprimitiv, inte på en div med z-index.

Dialog

::backdrop istället för en overlay-div. Bara kroppen scrollar.

<dialog class="ws-dialog" id="edit">
  <div class="ws-dialog__header">…</div>
  <div class="ws-dialog__body">…</div>
  <div class="ws-dialog__footer">…</div>
</dialog>

<script>
  document.getElementById("edit").showModal();
</script>

Rapportera tid

Villkor för behandling av personuppgifter

Bara kroppen scrollar.

Stycke 1. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Stycke 2. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Stycke 3. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Stycke 4. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Stycke 5. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Stycke 6. Rubriken står kvar och knapparna ligger kvar där man lämnade dem.

Bekräfta

Den säkra knappen får fokus.

import { confirmDialog } from "@whitespace/malm-ui";

const ok = await confirmDialog({
  title: "Ta bort projektet?",
  body: "412 rapporterade timmar följer med. Det går inte att ångra.",
  confirmLabel: "Ta bort",
  danger: true,
});
Ett formulär

En dialog som är ett formulär lägger sina tre delar i <form>; formuläret kliver ur rutnätet, så att delarna är dess rader.

Ny nyckel

<dialog class="ws-dialog">
  <form method="post" action="/klienter/nsr/nycklar">
    <div class="ws-dialog__header">…</div>
    <div class="ws-dialog__body">…</div>
    <div class="ws-dialog__footer">…</div>
  </form>
</dialog>

Popover

Plattformens [popover] ger top layer, Esc och light-dismiss.

Status

<button popovertarget="filters" data-malm-anchor class="btn btn-secondary">Filter</button>
<div id="filters" popover class="ws-popover-panel">…</div>

Tooltip

Bara ledtrådar. Allt en användare behöver är text på sidan.

Senast synkad 08:12Fakturerbar tid delat med rapporterad tid, för perioden.
<div popover class="ws-tooltip">…</div>

Ovanpå allt annat, eller inte alls

Ritad med popover, så den kan inte klippas av en overflow: hidden längre upp.