Kvikr UI – komplett användarinstruktion
Den här sidan visar fungerande komponenter, tillgängliga varianter och fullständig HTML-kod. Alla exempel använder endast kvikr-ui.css och kvikr-ui.js.
Grundregel
Länka hela CSS-paketet i sidhuvudet och JavaScript-filen med defer. Lägg inte till egen CSS när en Kvikr UI-komponent redan löser uppgiften.
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Min Kvikr UI-sida</title>
<link rel="stylesheet" href="https://kvikr.se/ui/css/kvikr-ui.css">
<script src="https://kvikr.se/ui/js/kvikr-ui.js" defer></script>
</head>
<body>
<header class="k-header">
<div class="k-container k-header-main">
<a class="k-brand" href="/">
<svg class="k-icon k-icon-xl" aria-hidden="true"><use href="#k-icon-rune-r"></use></svg>
<div class="k-brand-title">
<div class="name">Tjänstens namn</div>
<div class="tagline">Kort beskrivning</div>
</div>
</a>
</div>
</header>
<main class="k-main">
<div class="k-container k-layout-stack">
<h1>Sidans rubrik</h1>
<section class="k-panel pad">
<p>Sidans innehåll.</p>
</section>
</div>
</main>
<footer class="k-footer">
<div class="k-container k-footer-inner">
<p class="k-footer-copy">© Tjänstens namn</p>
<nav class="k-footer-links" aria-label="Sidfot">
<a href="/om/">Om tjänsten</a>
</nav>
</div>
</footer>
</body>
</html>Layout
Använd behållaren för sidbredd, stack för lodrät rytm, tvåkolumnslayout för filter/resultat och split för två ändar av samma rad.
<main class="k-main">
<div class="k-container k-layout-stack">
<div class="k-panel pad">Staplad region</div>
<div class="k-layout-2col">
<aside class="k-panel pad">Vänsterkolumn</aside>
<div class="k-panel pad">Huvudinnehåll</div>
</div>
<div class="k-split">
<span>Vänster</span>
<span>Höger</span>
</div>
</div>
</main>Layout- och hjälparklasser
Kortgrid finns i cols-2, cols-3 och cols-4. Split har varianterna k-split-top, k-split-center, k-split-bottom, k-split-stretch och k-split-shrink-left. Marginalverktyg finns som k-mt-1..3, k-mb-1..3, k-my-1..3 och k-mx-1..3. Skalning görs med k-scale-sm och k-scale-lg.
<div class="k-card-grid cols-2">
<div class="k-panel pad">Kolumn 1</div><div class="k-panel pad">Kolumn 2</div>
</div>
<div class="k-card-grid cols-3">
<div class="k-panel pad">1</div><div class="k-panel pad">2</div><div class="k-panel pad">3</div>
</div>
<div class="k-split k-split-top"><span>Vänster</span><span>Höger</span></div>
<div class="k-split k-split-center"><span>Vänster</span><span>Höger</span></div>
<div class="k-split k-split-bottom"><span>Vänster</span><span>Höger</span></div>
<div class="k-panel pad k-mt-1 k-mb-2">Marginalverktyg</div>
<div class="k-scale-sm">Mindre skala</div>
<div class="k-scale-lg">Större skala</div>Typografi
Använd semantiska HTML-rubriker. Storleks- och viktklasser ändrar utseendet utan att ändra dokumentets semantik.
Rubrik 1
Rubrik 2
Rubrik 3
Rubrik 4
Visuell H2 på ett stycke
Extra liten · Liten · Normal · Stor
Normal · Medium · Fet
Dämpad text.
<h1>Rubrik 1</h1>
<h2>Rubrik 2</h2>
<h3>Rubrik 3</h3>
<h4>Rubrik 4</h4>
<p class="k-text-h1">Visuell H1 utan ändrad semantik</p>
<p class="k-text-h2">Visuell H2</p>
<p class="k-text-h3">Visuell H3</p>
<p class="k-text-h4">Visuell H4</p>
<p class="k-text-xs">Extra liten text</p>
<p class="k-text-sm">Liten text</p>
<p class="k-text-md">Normal text</p>
<p class="k-text-lg">Stor text</p>
<p class="k-text-muted">Dämpad text</p>
<p class="k-text-regular">Normal vikt</p>
<p class="k-text-medium">Mediumvikt</p>
<p class="k-text-bold">Fet text</p>
<p>Brödtext med <strong>betoning</strong>, <a href="#">länk</a> och <code>kod</code>.</p>Ikoner
JavaScriptet laddar SVG-spriten automatiskt. Ikonerna nedan är grupperade efter funktion så närliggande användningsområden ligger tillsammans. Använd symbolens fullständiga id i <use>. Storlekarna är k-icon-sm, k-icon-md, k-icon-lg och k-icon-xl.
Ändra och hantera
Sök, filtrera och uppdatera
Navigering och vy
Paneler och visning
Filer, media och platser
Livshändelser
Konto och kommunikation
Språk och länder
Kvikr
<svg class="k-icon" aria-hidden="true"><use href="#k-icon-home"></use></svg>
<svg class="k-icon k-icon-lg" aria-hidden="true"><use href="#k-icon-search"></use></svg>Sidhuvud
Sidhuvudet består av varumärke och valfria åtgärder. Det anpassar sig automatiskt till smala skärmar.
<header class="k-header">
<div class="k-container k-header-main">
<div class="k-brand">
<a class="k-brand-logo" href="../tree/" aria-label="Tjänstens namn">
<img src="../images/kvikr-aett-logo.svg" width="32" height="32" alt="">
</a>
<div class="k-brand-title">
<div class="name k-text-h2">Tjänstens namn</div>
<div class="tagline muted">Kort beskrivning</div>
</div>
</div>
<nav class="k-header-actions" aria-label="Huvudmeny">
<a class="k-btn ghost" href="/om/">Om tjänsten</a>
<button class="k-btn primary" type="button">Logga in</button>
</nav>
</div>
</header>Sidfot
Sidfoten använder k-footer, en vanlig k-container och k-footer-inner. Länkar grupperas i k-footer-links.
<footer class="k-footer">
<div class="k-container k-footer-inner">
<p class="k-footer-copy">© 2026 Tjänstens namn</p>
<nav class="k-footer-links" aria-label="Sidfot">
<a href="/om/">Om</a>
<a href="/kontakt/">Kontakt</a>
</nav>
</div>
</footer>Paneler och kort
Paneler kan ha huvud, kropp och fot. För navigationskort används en riktig länk med k-card-link.
Panelens innehåll.
Diskret panel
Panel med klasserna subtle pad.
Klickbart kort
Hela kortet är en länk.
<article class="k-panel">
<div class="k-panel-header">
<div class="k-panel-title">
<div class="k-title">Panelrubrik</div>
<div class="k-subtitle">Underrubrik</div>
</div>
</div>
<div class="k-panel-body"><p>Panelens innehåll.</p></div>
<div class="k-panel-footer"><button class="k-btn">Åtgärd</button></div>
</article>
<article class="k-panel subtle pad">
<h3>Diskret panel</h3>
<p>Innehåll.</p>
</article>
<a class="k-panel k-card-link k-card-link-row" href="/sida/">
<div class="k-card-link-icon">
<svg class="k-icon k-icon-lg" aria-hidden="true"><use href="#k-icon-arrow-right"></use></svg>
</div>
<div class="k-card-link-content">
<h3>Klickbart kort</h3>
<p class="k-text-muted">Hela kortet är en länk.</p>
</div>
</a>Knappar
Samma klass fungerar på button och a. Använd primary sparsamt för sidans viktigaste handling och danger för destruktiva handlingar.
<button class="k-btn" type="button">Standard</button>
<button class="k-btn primary" type="submit">Primär</button>
<button class="k-btn danger" type="button">Farlig</button>
<button class="k-btn ghost" type="button">Diskret</button>
<button class="k-btn" type="button" disabled>Inaktiverad</button>
<a class="k-btn" href="/nästa/">Länkknapp</a>
<button class="k-btn k-btn-icon" type="button" aria-label="Sök">
<svg class="k-icon" aria-hidden="true"><use href="#k-icon-search"></use></svg>
</button>Formulär
Standard är två kolumner på bred skärm och en på mobil. Använd cols-1, cols-2 eller cols-3 när antalet kolumner ska styras.
<form class="k-form" action="/spara" method="post">
<div class="k-field">
<label class="k-label" for="namn">Namn</label>
<input class="k-input" id="namn" name="namn" type="text" placeholder="Anna Andersson">
</div>
<div class="k-field">
<label class="k-label" for="typ">Typ</label>
<select class="k-select" id="typ" name="typ">
<option>Privat</option><option>Företag</option>
</select>
</div>
<div class="k-field">
<label class="k-label" for="beskrivning">Beskrivning <span class="k-optional">frivillig</span></label>
<textarea class="k-textarea" id="beskrivning" name="beskrivning"></textarea>
<div class="k-help">Beskriv kortfattat.</div>
</div>
<div class="k-field">
<span class="k-label">Inställningar</span>
<label class="k-check"><input type="checkbox" name="aktiv"> Aktiv</label>
<label class="k-radio"><input type="radio" name="nivå" value="normal" checked> Normal</label>
</div>
<div class="k-form-actions horizontal">
<button class="k-btn primary" type="submit">Spara</button>
<button class="k-btn" type="reset">Återställ</button>
</div>
</form>Validering
Regler anges direkt på fältet med data-validate. Inbyggda regler omfattar bland annat required, email, isbn, phone, postal-code, min-length:N, max-length:N och exact-length:N. Validering sker vid inmatning, ändring och när ett fält lämnas. Vid vanlig formulärsubmit stoppas formuläret automatiskt om något validerat fält är ogiltigt.
Prova direkt
Skriv i fälten och flytta fokus till nästa fält. Demonstrationen använder fältvalideringen utan att skicka formuläret någonstans.
<form class="k-form" novalidate>
<div class="k-field">
<label class="k-label" for="name">Namn</label>
<input class="k-input" id="name" name="name" data-validate="required min-length:2 max-length:80">
<div class="k-field-error"></div>
</div>
<div class="k-field">
<label class="k-label" for="email">E-post</label>
<input class="k-input" id="email" name="email" type="email" data-validate="required email">
<div class="k-field-error"></div>
</div>
<div class="k-field">
<label class="k-label" for="postal">Postnummer</label>
<input class="k-input" id="postal" name="postal" data-validate="postal-code">
<div class="k-field-error"></div>
</div>
<button class="k-btn primary" type="submit">Kontrollera</button>
</form>Meddelanden
Använd informations-, varnings-, fel- och lyckat-varianterna efter meddelandets betydelse.
Information
Det här är ett informationsmeddelande.
Varning
Kontrollera uppgifterna innan du fortsätter.
Fel
Åtgärden kunde inte genomföras.
Klart
Ändringarna har sparats.
<div class="k-alert info">
<span class="k-dot info"></span>
<p class="title">Information</p>
<p class="msg">Det här är ett informationsmeddelande.</p>
</div>
<div class="k-alert warn">
<span class="k-dot warn"></span>
<p class="title">Varning</p>
<p class="msg">Kontrollera uppgifterna innan du fortsätter.</p>
</div>
<div class="k-alert err">
<span class="k-dot err"></span>
<p class="title">Fel</p>
<p class="msg">Åtgärden kunde inte genomföras.</p>
</div>
<div class="k-alert ok">
<span class="k-dot ok"></span>
<p class="title">Klart</p>
<p class="msg">Ändringarna har sparats.</p>
</div>Etiketter och statuschips
Chips grupperas i k-chips. Accentvarianten markerar semantik medan statusvarianterna visar positivt eller negativt tillstånd.
<div class="k-chips">
<span class="k-chip">Standard</span>
<span class="k-chip accent"><strong>Typ</strong> Accent</span>
<span class="k-chip k-chip-ok">Godkänd</span>
<span class="k-chip k-chip-bad">Avvisad</span>
<span class="k-chip">
<svg class="k-icon" aria-hidden="true"><use href="#k-icon-star-outline"></use></svg>
Med ikon
</span>
</div>Tabeller
Omslut tabellen med k-table-wrap för horisontell rullning på små skärmar. Klassen num högerjusterar tal.
<div class="k-table-wrap">
<table class="k-table">
<thead><tr><th>Namn</th><th>Status</th><th class="num">Antal</th><th>Åtgärd</th></tr></thead>
<tbody>
<tr><td>Anna Andersson</td><td><span class="k-chip k-chip-ok">Aktiv</span></td><td class="num">24</td><td><a href="/person/anna/">Öppna</a></td></tr>
<tr><td>Bo Berg</td><td><span class="k-chip">Utkast</span></td><td class="num">7</td><td><a href="/person/bo/">Öppna</a></td></tr>
</tbody>
</table>
</div>Sidnumrering
Varje sidlänk eller aktuell sida ska ha klassen k-page. Markera aktuell sida med aria-current="page".
<nav class="k-pagination" aria-label="Sidnumrering">
<a class="k-page" href="?sida=1" aria-label="Föregående">‹</a>
<a class="k-page" href="?sida=1">1</a>
<span class="k-page" aria-current="page">2</span>
<a class="k-page" href="?sida=3">3</a>
<a class="k-page" href="?sida=3" aria-label="Nästa">›</a>
</nav>Tomt läge
Ett tomt läge ska förklara vad som saknas och erbjuda en relevant nästa handling.
Inga träffar
Prova en annan sökfras eller rensa filtren.
<div class="k-empty">
<svg class="k-icon k-icon-xl" aria-hidden="true"><use href="#k-icon-search"></use></svg>
<h3>Inga träffar</h3>
<p>Prova en annan sökfras eller rensa filtren.</p>
<button class="k-btn" type="button">Rensa filter</button>
</div>Sidomeny
Använd k-layout tillsammans med k-sidebar, en panel och k-sidemenu. Markera aktuell länk med active och aria-current. Varianten k-layout-sidebar kan användas när du vill ha den fasta sidomenybredd som komponenten ger.
Huvudinnehåll
Sidomenyn staplas över innehållet på smala skärmar.
<div class="k-layout">
<aside class="k-sidebar k-panel">
<nav class="k-sidemenu" aria-label="Sektioner">
<a class="active" aria-current="page" href="/">Översikt</a>
<a href="/personer/">Personer</a>
<a href="/installningar/">Inställningar</a>
</nav>
</aside>
<main class="k-main k-panel pad"><h1>Huvudinnehåll</h1></main>
</div>Kodblock
Använd k-code med valfritt huvud. Själva koden ligger i pre och code.
function hello(name) {
return `Hej ${name}!`;
}
console.log(hello("Kvikr"));<div class="k-code">
<div class="k-code-head">
<span class="k-code-title">JavaScript</span>
</div>
<pre><code>function hello(name) {
return `Hej ${name}!`;
}</code></pre>
</div>Media och bildkort
Kvikr UI har mediaelement och tre bildkortslayouter: vertikal, horisontell och kvadratisk. Kombinera k-card-media-square med k-card-media-vertical när texten ska ligga under den kvadratiska bildytan.
Vertikalt bildkort
Bild ovanför innehållet.
Kvadratiskt bildkort
Kvadratisk bildyta.
Horisontellt bildkort
Bild bredvid innehållet. Den horisontella varianten får mer utrymme när den visas på egen rad.
<article class="k-panel k-card-media k-card-media-vertical">
<div class="k-panel-body">
<figure class="k-card-media-figure"><img class="k-media" src="media-demo.svg" alt="Demobild"></figure>
<div class="k-card-media-body"><h3>Vertikalt bildkort</h3><p>Bild ovanför innehållet.</p></div>
</div>
</article>
<article class="k-panel k-card-media k-card-media-horizontal">
<div class="k-panel-body">
<figure class="k-card-media-figure"><img class="k-media" src="media-demo.svg" alt="Demobild"></figure>
<div class="k-card-media-body"><h3>Horisontellt bildkort</h3><p>Bild bredvid innehållet.</p></div>
</div>
</article>
<article class="k-panel k-card-media k-card-media-vertical k-card-media-square">
<div class="k-panel-body">
<figure class="k-card-media-figure"><img class="k-media" src="media-demo.svg" alt="Demobild"></figure>
<div class="k-card-media-body"><h3>Kvadratiskt bildkort</h3><p>Kvadratisk bildyta.</p></div>
</div>
</article>Citat
Varianter kan kombineras: accent, muted, center, lg, compact och plain.
Standardcitat med tydlig avgränsning.
Källa
Accentcitat.
Stort centrerat citat.
Kompakt, neutral variant.
<blockquote class="k-quote">
<p>Standardcitat med tydlig avgränsning.</p>
<cite class="k-quote-cite">Källa</cite>
</blockquote>
<blockquote class="k-quote k-quote-accent"><p>Accentcitat.</p></blockquote>
<blockquote class="k-quote k-quote-center k-quote-lg"><p>Stort centrerat citat.</p></blockquote>
<blockquote class="k-quote k-quote-plain k-quote-compact"><p>Kompakt neutral variant.</p></blockquote>Flikar
Koppla varje flik till en panel med samma värde i data-k-tab och data-k-tabpanel. data-k-tabs-scope avgränsar vilka paneler en flikrad styr. Varianten k-tabs-segmented ger segmenterad form.
Översiktens innehåll.
Detaljernas innehåll.
<div class="k-tabs" data-k-tabs data-k-tabs-scope="#mina-paneler">
<button class="k-tab" type="button" data-k-tab="overview">Översikt</button>
<button class="k-tab" type="button" data-k-tab="details">Detaljer</button>
</div>
<div id="mina-paneler" class="k-tabpanels">
<section class="k-tabpanel" data-k-tabpanel="overview">
<h3>Översikt</h3>
<p>Översiktens innehåll.</p>
</section>
<section class="k-tabpanel" data-k-tabpanel="details">
<h3>Detaljer</h3>
<p>Detaljernas innehåll.</p>
</section>
</div>
<div class="k-tabs k-tabs-segmented" data-k-tabs data-k-tabs-scope="#segment-paneler">
<button class="k-tab" type="button" data-k-tab="one">Ett</button>
<button class="k-tab" type="button" data-k-tab="two">Två</button>
</div>
<div id="segment-paneler" class="k-tabpanels">
<section class="k-tabpanel" data-k-tabpanel="one"><p>Första panelen.</p></section>
<section class="k-tabpanel" data-k-tabpanel="two"><p>Andra panelen.</p></section>
</div>Dragspel
Varje post måste ha data-k-disclosure, en toggle och ett innehåll. Värdet open öppnar posten vid start.
Innehållet visas initialt.
Innehållet visas efter klick.
<div class="k-accordion">
<section class="k-acc-item" data-k-disclosure="open">
<button class="k-acc-btn" data-k-disclosure-toggle>Öppen från början</button>
<div class="k-acc-body" data-k-disclosure-content><p>Innehåll.</p></div>
</section>
<section class="k-acc-item" data-k-disclosure>
<button class="k-acc-btn" data-k-disclosure-toggle>Stängd från början</button>
<div class="k-acc-body" data-k-disclosure-content><p>Innehåll.</p></div>
</section>
</div>Modal och bekräftelse
Öppna en modal deklarativt med data-k-open. Stängknappar använder data-k-close. Bekräftelsedialogen kan ange titel, OK-text, avbryttext och ett åtgärdsvärde.
<button class="k-btn" type="button" data-k-open="#demo-modal">Öppna modal</button>
<div class="k-modal" id="demo-modal" aria-hidden="true">
<div class="k-modal-card">
<div class="k-modal-head"><h2>Modalrubrik</h2><button class="k-btn ghost" type="button" data-k-close>Stäng</button></div>
<div class="k-modal-body"><p>Modalens innehåll.</p></div>
<div class="k-modal-foot"><button class="k-btn primary" type="button" data-k-close>Klart</button></div>
</div>
</div>
<button class="k-btn danger" type="button"
data-k-confirm="Vill du verkligen ta bort posten?"
data-k-confirm-title="Ta bort post"
data-k-confirm-ok="Ta bort"
data-k-confirm-cancel="Avbryt"
data-k-confirm-action="delete-item">
Ta bort
</button>Informationshjälp och tooltip
Informationshjälp kan ha titel, position och bredd. Tooltip kan öppnas via hover, klick eller båda beroende på data-k-tooltip-trigger.
<div class="k-field">
<div class="k-field-label-row">
<label class="k-label" for="archive-ref">Arkivreferens</label>
<button class="k-info" type="button"
aria-label="Visa hjälp om arkivreferens"
data-k-info="Ange volym och sida enligt källans egen numrering, till exempel 3/0124."
data-k-info-title="Arkivreferens"
data-k-info-pos="right"
data-k-info-width="320">
<svg class="k-icon" aria-hidden="true">
<use href="#k-icon-info"></use>
</svg>
</button>
</div>
<input class="k-input" id="archive-ref" type="text"
placeholder="Till exempel 3/0124">
</div>
<button class="k-btn" type="button"
data-k-info="Kort hjälptext"
data-k-info-title="Om fältet"
data-k-info-pos="bottom"
data-k-info-width="320">
Visa hjälp
</button>
<button class="k-btn" type="button"
data-k-tooltip="Kort tooltip"
data-k-tooltip-trigger="both"
data-k-tooltip-width="240">
Håll över eller klicka
</button>Popup-meny
Omslut menyknapp och panel med data-k-menu. Knappen använder data-k-menu-toggle och panelen data-k-menu-panel.
<div data-k-menu>
<button class="k-btn" type="button" data-k-menu-toggle>Fler åtgärder</button>
<div class="k-panel" data-k-menu-panel hidden>
<nav class="k-sidemenu" aria-label="Åtgärder">
<a href="/redigera/">Redigera</a>
<a href="/exportera/">Exportera</a>
</nav>
</div>
</div>Toast
Toast kan skapas deklarativt med data-attribut eller programmatiskt via KvikrUI.showToast.
<button class="k-btn" type="button"
data-k-toast="Ändringarna har sparats."
data-k-toast-title="Sparat"
data-k-timeout="3500">Visa toast</button>
<script>
KvikrUI.showToast("Skapad via API.", { title: "Klart", timeout: 5000 });
</script>Filterrad
Räknaren använder data-k-filter-count och pekar ut sitt formulär med data-k-form="#id". Textformatet kan ändras med data-k-filter-format.
<section class="k-panel k-panel-thin k-filterbar is-collapsible" data-k-disclosure="open">
<div class="k-panel-header k-filterbar-head">
<div class="k-filterbar-title">
<button class="k-btn ghost k-filterbar-toggle" type="button" data-k-disclosure-toggle>Filter</button>
<span class="k-filterbar-meta" data-k-filter-count data-k-form="#filter-form">0 aktiva</span>
</div>
</div>
<div class="k-panel-body k-filterbar-content" data-k-disclosure-content>
<form id="filter-form" class="k-filterbar-grid cols-3">
<div class="k-field"><label class="k-label" for="filter-q">Sökfras</label><input class="k-input" id="filter-q" name="q" type="search"></div>
<div class="k-field"><label class="k-label" for="filter-type">Typ</label><select class="k-select" id="filter-type" name="type"><option value="">Alla</option><option value="person">Person</option></select></div>
<div class="k-form-actions"><button class="k-btn primary" type="submit">Filtrera</button></div>
</form>
</div>
</section>Flytande knappar
Använd k-fab-main som en direkt åtgärd. k-fab-secondary är en separat sekundär flytande knapp. Kvikr UI har CSS för k-fab-menu, men den centrala JavaScript-filen innehåller för närvarande ingen inbyggd öppna/stäng-funktion för menyn. Därför demonstreras ingen sådan meny här.
<div class="k-fab">
<a class="k-fab-main" href="/ny/" aria-label="Ny post">
<svg class="k-icon" aria-hidden="true"><use href="#k-icon-plus"></use></svg>
</a>
</div>
<div class="k-fab-secondary">
<button class="k-fab-secondary-btn" type="button" data-k-theme-toggle aria-label="Växla tema">
<svg class="k-icon" aria-hidden="true"><use href="#k-icon-theme-dark"></use></svg>
</button>
</div>Ljust och mörkt tema
Tema kan växlas direkt eller styras med lägena light, dark, system och sun. Solläget kan få latitud och longitud.
<button class="k-btn" type="button" data-k-theme-mode="light">Ljust</button>
<button class="k-btn" type="button" data-k-theme-mode="dark">Mörkt</button>
<button class="k-btn" type="button" data-k-theme-mode="system">System</button>
<button class="k-btn" type="button" data-k-theme-mode="sun" data-k-theme-lat="59.3293" data-k-theme-lon="18.0686">Soltid</button>
<button class="k-btn" type="button" data-k-theme-toggle>Växla</button>
<script>
KvikrUI.setThemeMode("system", { persist: true });
KvikrUI.applyTheme("dark", { persist: true });
</script>Ladda fler
data-k-load-more skickar händelsen k:loadmore. data-k-target pekar på målbehållaren, data-k-step anger önskad mängd och data-k-offset aktuell position. Själva datahämtningen tillhör applikationen.
Applikationshändelse
Kvikr UI skickar k:loadmore, men applikationen måste själv hämta och lägga till poster. Knappen nedan visar endast komponentens utseende.
<div id="lista" class="k-layout-stack"></div>
<button class="k-btn" type="button"
data-k-load-more
data-k-target="#lista"
data-k-step="10"
data-k-offset="0">
Ladda fler
</button>
<script>
document.addEventListener('k:loadmore', async (event) => {
const { button, target, offset, step } = event.detail;
// Hämta nästa poster med din applikations egen datakälla.
// Lägg dem i target och uppdatera offset när hämtningen lyckats.
button.dataset.kOffset = String(offset + step);
});
</script>JavaScript-API
Använd API:t när komponenter skapas dynamiskt eller behöver styras från programkod.
Publikt API: initAll, reinit, openModal, closeModal, openInfo, closeInfo, showToast, initIcons, validerings- och temafunktioner.
const root = document.querySelector("#dynamiskt-innehall");
root.innerHTML = `<button class="k-btn" data-k-toast="Klart">Visa toast</button>`;
KvikrUI.reinit(root);
KvikrUI.openModal(document.querySelector("#min-modal"));
KvikrUI.closeModal(document.querySelector("#min-modal"));
KvikrUI.showToast("Sparat", { title: "Klart", timeout: 3500 });
const valid = KvikrUI.validateForm(document.querySelector("#mitt-formular"));
KvikrUI.addValidator("slug", {
validate(field) { return /^[a-z0-9-]+$/.test(field.value); },
message: "Använd små bokstäver, siffror och bindestreck."
});
KvikrUI.setThemeMode("system", { persist: true });
console.log(KvikrUI.getCurrentTheme());Kompletta sidor
Varje sida är en fristående, körbar HTML-fil utan egen CSS.