FxCompare
TabellenSchieberegler über zwei Bildern für Vorher-Nachher-Vergleiche.
Übernommen aus Inspira UI (compare), MIT-Lizenz.
LmsCompare:
jenes stellt zwei Textspalten gegenüber, dieses schiebt über zwei Bilder.Beispiele (2)
Vorher-Nachher-Schieber
Mit der Maus über das Bild fahren. slideMode="drag" verlangt stattdessen Ziehen.
Ziehen statt Überfahren, mit Autoplay
API
Vollständig aus den Quellen erzeugt. Dieselben Angaben stehen an jedem Beispiel hinter dem Knopf API — hier ausgeschrieben, damit sie über die Seitensuche und im Druck auffindbar bleiben.
Props
| Prop | Typ | Standard | Bedeutung |
|---|---|---|---|
firstImage | string; | "" | — |
secondImage | string; | "" | — |
firstImageAlt | string; | "First image" | — |
secondImageAlt | string; | "Second image" | — |
class | string; | "" | — |
firstContentClass | string; | "" | — |
secondContentClass | string; | "" | — |
initialSliderPercentage | number; | 50 | — |
slideMode | "hover" | "drag"; | "hover" | — |
showHandlebar | boolean; | true | — |
autoplay | boolean; | false | — |
autoplayDuration | number; | 5000 | — |
Slots
| Slot | In Markdown |
|---|---|
first-content | #first-content |
handle | #handle |
second-content | #second-content |
Emits
| Event | Nutzlast |
|---|---|
drag:end | — |
drag:start | — |
hover:enter | — |
hover:leave | — |
update:percentage | value: number |
Aus Markdown nicht erreichbar. MDC kann keine Events abonnieren. Wer auf diese Events reagieren muss, bindet den Baustein in einer .vue-Datei ein.
Theme
Dieser Baustein hat keine Fläche in der app.config.ts.
Sein Aussehen steuerst du über Props — bei den didaktischen Bausteinen über das gemeinsame Farbrollen-Vokabular (color, variant), bei den dekorativen über deren eigene Props. Eine Theming-Ebene wie ui.<komponente> in Nuxt UI gibt es hier noch nicht.
Changelog
- Geändert
0.7.0src/runtime/utils/totp.tskommt hinzu: TOTP in reinem JavaScript, gegen die Testvektoren des RFC geprüft. Einzige Änderung gegenüber der Quelle sind Nicht-Null-Zusicherungen an den Feldzugriffen — der Bestand an@ts-nocheckbleibt bei 51, und keine Ausnahme liegt außerhalb vonfx/ - Hinzugefügt
0.6.0useLmsProgress: Fortschritt lässt sich speichern, ohne dass die Bibliothek ein Backend kennt. Das Zielprojekt hinterlegt einmal einen Adapter mitget/set, die Bausteine nutzen ihn, wenn er da ist — sonst halten sie den Stand im Speicher wie bisher. Ereignisse wären hier nutzlos: MDC kann keine Events abonnieren, und genau dort werden diese Bausteine benutzt - Behoben
0.4.0Die Warnung
Slot "default" invoked outside of the render functionerscheint nicht mehr. Der Katalog läuft jetzt mit 0 Fehlern und 0 Warnungen - Hinzugefügt
0.3.0Der MDC-Bereich jedes Beispiels ist jetzt ein Editor: Syntaxhervorhebung, Code-Vervollständigung aus der Registry, Prüfung in sechs Stufen und eine Vorschau, die beim Tippen mitläuft. Oben rechts Zurücksetzen und Kopieren
- Hinzugefügt
0.3.0Die Prüfung meldet unbekannte Bausteine, unbekannte Props, fehlende Pflicht-Props, unbekannte Slots, Events (die MDC nicht abonnieren kann) und den Typkonflikt, an dem man in MDC am häufigsten hängenbleibt: Inline-Attribute sind immer Zeichenketten,
{count=14}übergibt"14" - Hinzugefügt
0.2.0API-Ansicht je Baustein: Props, Slots, Emits, Theme und dieser Changelog. In der Demo-Hülle als Reiter hinter dem Knopf API, auf der Detailseite ausgeschrieben
- Hinzugefügt
0.2.0Emits werden dokumentiert. Sie sind der Grund, warum sich manche Bausteine aus Markdown heraus nicht vollständig bedienen lassen: MDC kann keine Events abonnieren
- Geändert
0.2.0Die Komponentenreferenz der README wird jetzt vollständig erzeugt statt von Hand gepflegt
- Geändert
0.2.0Auch die Tabelle der optionalen Abhängigkeiten wird erzeugt. Sie war gedriftet:
motion-vstand mit 50 statt 54 Komponenten darin,@uiw/color-convertunter „je 1", obwohl es drei sind - Hinzugefügt
0.1.0Erstveröffentlichung: 187 Bausteine in 17 Kategorien, davon 40 didaktische
Lms- und 147 dekorativeFx-Bausteine aus Inspira UI