Einführung
RayCraft ist eine Bibliothek von Blazor-Steuerelementen (.NET 10: Server, WebAssembly und Auto) mit hellen, dunklen und kompakten Themes, englischen und bulgarischen Texten sowie Tastatur- und Screenreader-Unterstützung. RayCraft Free ist jetzt verfügbar; RayCraft Complete ist jetzt verfügbar.
Installation
Fügen Sie das Paket hinzu mit:
dotnet add package RayCraft.BlazorSiehe Loslegen für die Einrichtungsschritte. Funktionierende Beispiele finden Sie im öffentlichen GitHub-Repository, das nur Beispiel- und Democode enthält, nicht den Code der Bibliothek.
Steuerelemente
Schaltflächen
Button (Free)
Löst eine Aktion aus oder navigiert, wenn Href gesetzt ist (die Schaltfläche wird dann als Link mit gleichem Aussehen gerendert).
IconButton (Free)
Schaltfläche, die nur ein Symbol zeigt. Label ist erforderlich: Es wird zum barrierefreien Namen und zum Tooltip.
ButtonGroup (Free)
Verbindet Schaltflächen zu einem segmentierten Steuerelement, waagerecht oder senkrecht. Kombinieren Sie es mit ToggleButton für einen Ansichtsumschalter.
ToggleButton (Free)
Schaltfläche, die einen An-Aus-Zustand hält und ihn mit aria-pressed bereitstellt.
SplitButton (Free)
Eine Hauptaktion mit einem Menü verwandter Aktionen. Es werden dieselben MenuItem-Elemente wie bei Menu verwendet.
FloatingActionButton (Free)
Eine quadratische Schaltfläche, an einer Bildschirmecke fixiert, für die Hauptaktion. Extended zeigt den Text neben dem Symbol; der Text ist stets der barrierefreie Name.
SpeedDial (Free)
Eine schwebende Schaltfläche, die eine kurze Liste von Aktionen öffnet. Escape schließt die Liste; jede Aktion ist eine echte Schaltfläche in der Tab-Reihenfolge.
ProgressButton (Free)
Eine Schaltfläche, die laufende Arbeit zeigt: einen Spinner, solange Progress nicht gesetzt ist, einen Balken am unteren Rand und einen gesprochenen Prozentwert, wenn er es ist.
CopyButton (Free)
Kopiert einen Text in die Zwischenablage und bestätigt es mit einem Häkchen. Braucht einen sicheren Kontext (https oder localhost).
Text und Zahlen
TextField (Free)
Einzeiliges Textfeld. Funktioniert mit EditForm und DataAnnotations; die Fehlermeldung erscheint unter dem Feld.
NumericField (Free)
Zahleneingabe für jeden numerischen Typ (int, decimal, double, Nullable-Versionen). Werte außerhalb von Min und Max werden begrenzt, und die Schaltflächen springen um Step.
PercentField (Free)
Zahlenfeld, das der Benutzer als Prozent (12.5) eingibt, während der Wert als Bruch (0.125) gespeichert wird.
MoneyField (Free)
Betragsfeld für decimal- und decimal?-Werte. Der Text wird mit der aktuellen Kultur formatiert und gelesen (sowohl 1,234.50 als auch 1.234,50 werden verstanden), auf Decimals gerundet und innerhalb von Min und Max gehalten.
MaskedInput (Free)
Textfeld, das Eingaben nach einer Maske formatiert: 0 ist eine Ziffer, a ein Buchstabe, * ein Buchstabe oder eine Ziffer, jedes andere Zeichen ein fester Trenner (ein Maskenzeichen wird mit Backslash maskiert).
OtpInput (Free)
Ein Feld pro Zeichen für Bestätigungscodes. Tippen springt zum nächsten Feld, Rücktaste zum vorherigen, und ein eingefügter Code füllt alle Felder.
SearchBox (Free)
Suchfeld mit Symbol und Löschen-Schaltfläche. OnSearch läuft bei Enter, bei der Löschen-Schaltfläche und (optional) bei jedem Tastendruck; Escape löscht den Text.
PasswordStrength (Free)
Zeigt mit vier Balken, einem Wort und einer Liste der erfüllten Regeln, wie stark ein Passwort ist.
InPlaceEditor (Free)
Zeigt einen Wert als Text; ein Klick verwandelt ihn in ein Feld mit Speichern- und Abbrechen-Schaltflächen.
Listenauswahl
Select (Free)
Dropdown zur Wahl eines Eintrags. TValue kann jeder Typ sein, auch Ihre eigenen Datensätze.
DropDownList (Free)
Eine Combobox für sehr lange Listen. Nur die sichtbaren Optionen werden gezeichnet, sodass 100.000 Einträge sofort aufgehen; Tippen grenzt die Liste ein.
MultiSelect (Free)
Dropdown mit Kontrollkästchen zur Auswahl mehrerer Einträge. Die Schaltfläche fasst die Auswahl zusammen; Alle auswählen und Leeren sind eingebaut.
ListBox (Free)
Immer sichtbare Liste für eine Auswahl (Radiobuttons darunter) oder mehrere (Kontrollkästchen).
Autocomplete (Free)
Textfeld, das eine Liste beim Tippen filtert. Unterstützt Pfeiltasten, Enter und Escape und folgt dem ARIA-Combobox-Muster.
MultiColumnComboBox (Free)
Ein Autocomplete, dessen Liste mehrere Spalten mit Kopfzeile zeigt. Beim Tippen wird in allen Spalten gesucht.
Cascader (Free)
Einen Wert aus einer Hierarchie wählen: Eine Spalte mit Auswahlen öffnet eine Spalte mit Unterauswahlen.
DropDownTree (Free)
Ein Dropdown-Feld, das einen Baum zur Wahl eines Knotens öffnet. Es basiert auf TreeView und Popover und behält deren Tastaturverhalten.
TagInput (Free)
Freie Liste von Tags. Enter oder Komma fügt den getippten Text hinzu, Rücktaste in einem leeren Feld entfernt das letzte Tag, und jedes Tag hat eine Entfernen-Schaltfläche.
Mention (Free)
Ein Textfeld, das nach einem Auslösezeichen (standardmäßig @) Namen vorschlägt. Pfeiltasten und Enter wählen; der gewählte Name wird mit dem Auslöser eingefügt.
Schieberegler und Bewertung
Slider (Free)
Ziehen, um eine Zahl in einem Bereich zu wählen.
RangeSlider (Free)
Schieberegler mit zwei Reglern zur Wahl eines unteren und eines oberen Werts. Beide Regler sind native Range-Eingaben, sodass die Pfeiltasten funktionieren.
RangeSelector (Free)
Ein Streifen mit zwei Griffen, der ein Intervall einer Reihe wählt; eine kleine Vorschau der Daten liegt hinter den Griffen.
Rating (Free)
Sternebewertung. Klicken Sie den aktuellen Stern erneut, um sie zu löschen.
RatingDisplay (Free)
Schreibgeschützte Sterne mit Bruchteilen (4.5 zeigt viereinhalb), optionaler Zahl und Anzahl der Rezensionen.
Farbe und Datei
ColorPicker (Free)
Farbfeld mit der nativen Farbauswahl, einem Hex-Textfeld und optionalen Vorgabefarben.
ColorPalette (Free)
Ein Raster aus Farbfeldern, das wie eine Radiogruppe funktioniert: ein Tab-Stopp, Pfeiltasten, Pos1 und Ende bewegen und wählen.
ColorButton (Free)
Eine Symbolleistenschaltfläche für eine Farbe: ein Symbol mit einem Balken in der gewählten Farbe darunter. Ein Klick öffnet die Farbauswahl des Browsers.
FileUpload (Free)
Ablagefläche und Dateiauswahl. Sie prüft Größe, Typ und Anzahl, listet die akzeptierten Dateien auf und löst FilesChanged aus; das Lesen des Inhalts liegt bei Ihnen (IBrowserFile.OpenReadStream).
SignaturePad (Free)
Zeichenfläche für eine Unterschrift mit Maus, Finger oder Stift. Der Wert ist ein PNG als Data-URL.
Editoren
MarkdownEditor (Free)
Textbereich mit Formatierungsleiste und Live-Vorschau, für Menschen, die Markdown statt Rich Text schreiben.
AddressField (Free)
Ein Empfängerfeld für E-Mail: Jede Adresse wird zu einem Chip. Tippen oder fügen Sie eine Liste ein, wählen Sie aus Vorschlägen Ihrer Datenquelle, bearbeiten Sie einen Chip per Doppelklick und sehen Sie sofort, welche Adressen ungültig sind.
Auswahl
Checkbox (Free)
Boolesche Eingabe mit Beschriftung.
CheckboxGroup (Free)
Eine Gruppe von Kontrollkästchen zur Auswahl mehrerer Einträge aus einer Liste, in einem Fieldset mit Legende, damit Screenreader den Gruppennamen vorlesen.
Radio (Free)
RadioGroup (Free)
Eine Wahl aus einer kurzen Liste. Nutzen Sie Items für einfache Listen oder Radio-Kinder für eigene Beschriftungen.
Switch (Free)
Boolescher Schalter, Hilfstechnologien als Schalter gemeldet.
Chip (Free)
Kompaktes Label, optional entfernbar.
ChipSet (Free)
Auswählbare Chips für Filter und Tags. Standardmäßig eine Auswahl, mehrere mit Multiple.
ToggleGroup (Free)
Segmentiertes Steuerelement für eine Auswahl (Radiogruppe) oder mehrere (Umschaltflächen). Nutzen Sie es für Ansichtsumschalter und Formatierungsschalter.
TransferList (Free)
Zwei Listen mit Schaltflächen zum Verschieben von Einträgen dazwischen, um eine Teilmenge aus einer langen Liste zu wählen.
Datum und Zeit
Calendar (Free)
Monatsraster, das von DatePicker und DateTimeRangePicker genutzt wird. Nutzen Sie es allein für die Datumsauswahl auf der Seite.
DatePicker (Free)
Datumsfeld mit Kalender. Monatsnamen, Wochentagsnamen, erster Wochentag und Datumsformat (auch als Standard-Platzhalter genutzt) folgen der aktuellen RayCraft-Sprache.
DateTimePicker (Free)
Ein Feld für Datum und Uhrzeit: ein DatePicker und ein TimePicker nebeneinander, die gemeinsam ein DateTime binden.
DateTimeRangePicker (Free)
Zeitraum mit Start und Ende, gewählt in einem Kalender, der zwei Monate nebeneinander zeigt (Months) (der erste Klick setzt den Start, der zweite das Ende) und pro Feld eingegeben oder angepasst.
MonthPicker (Free)
Wählt einen Monat und ein Jahr. Der Wert ist der erste Tag des Monats.
YearPicker (Free)
Wählt ein Jahr aus einem Raster von zwölf Jahren, mit Schaltflächen für frühere und spätere Seiten.
WeekPicker (Free)
Wählt eine ganze Woche. Der Wert ist der erste Tag der Woche der aktuellen Sprache; das Feld zeigt die ISO-Wochennummer und die Daten.
TimeField (Free)
Das nackte Zeittextfeld, auf dem TimePicker, TimeRangePicker und DateTimeRangePicker aufbauen.
TimePicker (Free)
Zeitfeld im Format der aktuellen RayCraft-Sprache (9:30 AM auf Englisch, 9:30 auf Bulgarisch), sodass es in jedem Browser gleich aussieht.
TimeRangePicker (Free)
Start- und Endzeit in einem Feld, jeweils im Format der aktuellen Sprache geschrieben wie bei TimePicker.
TimeSpanPicker (Free)
Gibt eine Dauer in Tagen, Stunden, Minuten und Sekunden ein. Der Wert ist ein TimeSpan.
EventCalendar (Free)
Monatsansicht mit Terminen. Mehrtägige Termine erscheinen an jedem Tag; ein Tag zeigt bis zu MaxEventsPerDay und einen Link +n weitere.
Formulare
ErrorSummary (Free)
Listet alle Validierungsmeldungen des umgebenden EditForm in einem Block auf. Platzieren Sie es in einem EditForm mit Validator.
FormLayout (Free)
Ordnet Beschriftungen und Felder in einem responsiven Zwölf-Spalten-Raster an, mit betitelten Abschnitten.
FormState (Free)
Sperrt jedes RayCraft-Feld darin mit einem Parameter: Disabled blockiert sie vollständig, ReadOnly zeigt die Werte ohne Änderungen zuzulassen.
LoginForm (Free)
Fertiges Anmeldeformular mit lokalisierter Validierung. Es löst OnSubmit mit dem eingegebenen LoginModel aus und überlässt die eigentliche Anmeldung Ihnen.
RegisterForm (Free)
Fertiges Registrierungsformular: Name, E-Mail, Passwort und Bestätigung, mit lokalisierter Validierung.
Captcha (Free)
Einfache Prüfung auf Menschen mit einer kleinen Rechenaufgabe. Sie hält nur einfache Bots ab; prüfen Sie echten Schutz auf dem Server (zum Beispiel mit einem dafür gebauten Dienst).
FormBuilder (Free)
Baut ein Formular aus Felddefinitionen: Text, E-Mail, Passwort, Zahl, Datum, Textbereich, Auswahl, Radio, Kontrollkästchen und Schalter.
Layout
Container (Free)
Zentriert Inhalte und begrenzt ihre Breite. Die Standardbreite folgt den Breakpoints (540, 720, 960, 1140 und 1320 px).
Stack (Free)
Ordnet Kinder in einer Zeile oder Spalte mit gleichmäßigem Abstand an.
Grid (Free)
12-Spalten-Raster. Span legt die Breite eines Elements auf jedem Bildschirm fest, und Sm, Md, Lg, Xl und Xxl ändern sie ab diesem Breakpoint (dieselben Breakpoints wie auf der Seite Breakpoints).
GridItem (Free)
Spacer (Free)
Leeres Element, das wächst, um den freien Platz in einer Flex-Zeile zu füllen und die folgenden Elemente ans Ende zu schieben.
Divider (Free)
Dünne Linie, die Inhalte trennt, waagerecht oder senkrecht.
Card (Free)
Container mit optionaler Kopf- und Fußzeile.
Panel (Free)
Betitelter Abschnitt mit optionaler Einklappen-Schaltfläche und Aktionen in der Kopfzeile.
Fieldset (Free)
Gruppiert zusammengehörige Formularelemente unter einer Legende. Disabled schaltet jedes Element darin ab.
Toolbar (Free)
Zeile von Werkzeugschaltflächen mit role=toolbar.
Splitter (Free)
Zwei größenveränderbare Bereiche. Ziehen Sie die Leiste mit Maus oder Berührung oder fokussieren Sie sie und nutzen Sie die Pfeiltasten (Umschalt für größere Schritte, Pos1 und Ende für die Grenzen).
Accordion (Free)
Aufklappbare Abschnitte. Standardmäßig schließt das Öffnen eines Abschnitts die anderen; setzen Sie Multiple, um mehrere zuzulassen.
Collapse (Free)
Zeigt oder verbirgt seinen Inhalt. Binden Sie Expanded an eine beliebige Schaltfläche; KeepMounted hält den Inhalt in der Seite, solange er verborgen ist.
TagCloud (Free)
Wörter in Größen, die ihrem Gewicht folgen. Tags können Links, auswählende Schaltflächen oder reiner Text sein.
TitleIndex (Free)
Eine nach Anfangsbuchstaben gruppierte Liste mit Buchstabenleiste oben. Ein Buchstabe verschiebt Fokus (und Ansicht) zu seinem Abschnitt; Buchstaben ohne Einträge sind deaktiviert.
Navigation
AppBar (Free)
Obere Leiste für Titel und Hauptaktionen. Legen Sie Links in NavContent, und sie stehen auf breiten Bildschirmen in der Leiste und klappen unter 768px hinter eine Menüschaltfläche.
Drawer (Free)
Seitenpanel. Temporäre Panels schweben mit Hintergrund über der Seite, schließen mit Escape und verschieben den Fokus ins Panel; setzen Sie Temporary=false für eine dauerhafte Seitenleiste.
NavMenu (Free)
Senkrechte Navigation mit Hervorhebung der aktiven Seite (auf Basis von NavLink) und einklappbaren Gruppen.
NavItem (Free)
NavGroup (Free)
Tabs (Free)
Wechselt zwischen Panels. Unterstützt Pfeiltasten, Pos1 und Ende.
Stepper (Free)
Führt den Benutzer mit Zurück- und Weiter-Schaltflächen durch eine Folge von Schritten.
Wizard (Free)
Ein geführter Ablauf in Schritten. Jeder Schritt kann vor dem Weitergehen validieren, ein Schritt kann optional sein, abgeschlossene Schritte lassen sich erneut öffnen, und das Ergebnis kann eine eigene Seite zeigen.
Breadcrumbs (Free)
Zeigt den Pfad zur aktuellen Seite. Das letzte Element ist die aktuelle Seite.
Menu (Free)
Schaltfläche, die eine Liste von Aktionen öffnet. Schließt bei Auswahl, Escape oder Klick außerhalb.
MenuItem (Free)
ContextMenu (Free)
Menü, das mit der rechten Maustaste oder der Kontextmenütaste über seinem Inhalt geöffnet wird.
MenuBar (Free)
Eine waagerechte Menüleiste für Anwendungen: Menüs der obersten Ebene mit Befehlen, Tastenkürzeln, Häkchen, Symbolen und Untermenüs.
CommandContextMenu (Free)
Ein Kontextmenü, das aus MenuCommand-Daten gebaut wird, mit Untermenüs, Häkchen, Tastenkürzeln und derselben Tastaturbedienung wie MenuBar.
TextContextMenu (Free)
Das Rechtsklick-Menü eines bearbeitbaren Textelements: Rückgängig, Wiederholen, Ausschneiden, Kopieren, Einfügen und Alles auswählen, plus Befehle, die Sie ergänzen.
ProfileMenu (Free)
Avatar, Name und ein Menü für den angemeldeten Benutzer, gebaut aus denselben MenuItem-Elementen wie Menu.
Pagination (Free)
Seitenauswahl mit Auslassungspunkten für lange Bereiche.
TreeView (Free)
Hierarchische Liste nach dem ARIA-Tree-Muster. Pfeiltasten bewegen und klappen auf, Pos1 und Ende springen, Enter oder Leertaste wählt.
ScrollSpy (Free)
Ein Inhaltsverzeichnis auf der Seite, das die Überschrift hervorhebt, die gerade oben auf dem Bildschirm steht.
Überlagerungen
Dialog (Free)
Modales Fenster. Der Fokus wandert hinein und bleibt dort, bis es schließt (Escape, Schließen-Schaltfläche oder Klick auf den Hintergrund); danach kehrt der Fokus zum vorherigen Element zurück.
DialogHost (Free)
Popover (Free)
Schwebendes Panel, das von einem Aktivator geöffnet wird. Schließt mit Escape oder Klick außerhalb.
Tooltip (Free)
Kurzer Hinweis bei Hover und Tastaturfokus. Reines CSS, daher funktioniert er auch, bevor die Seite interaktiv wird.
Overlay (Free)
Dunkelt die Seite ab (oder, mit Absolute, ihr positioniertes Elternelement) und kann Inhalte wie einen Spinner zeigen.
Lightbox (Free)
Tour (Free)
Schrittweise Einführung, die per CSS-Selektor gewählte Seitenelemente hervorhebt. Schritte ohne passendes Element erscheinen in der Mitte.
ColorDialog (Free)
FontDialog (Free)
SnackbarHost (Free)
Rückmeldung
Alert (Free)
Eingebettete Meldung, nach Schweregrad eingefärbt, mit passendem Symbol. Setzen Sie Dismissible für eine Schließen-Schaltfläche; nutzen Sie bind-Visible oder OnDismiss, um auf das Schließen zu reagieren.
Badge (Free)
Kleines Statuslabel.
BusyOverlay (Free)
Umschließt einen Bereich und dunkelt ihn ab, solange Busy true ist, und zeigt oben einen Spinner. Die Abdeckung blockiert die Maus, markiert den Bereich mit aria-busy und kündigt die Beschriftung an.
CookieConsent (Free)
Ein Banner, das fragt, welche Cookies erlaubt sind. Es merkt sich die Antwort im lokalen Speicher, bietet Alle akzeptieren, Nur notwendige und eine Auswahl nach Kategorie und blockiert die Seite nicht.
EmptyState (Free)
Meldung für Listen und Seiten ohne Inhalt, mit Symbol, Erklärung und optionalen Aktionen.
NotificationCenter (Free)
Eine Glockenschaltfläche mit der Zahl ungelesener Benachrichtigungen und einem Panel, das sie auflistet. Benutzer können sie lesen, verwerfen und leeren; die Zahl wird Screenreadern angesagt.
ProgressBar (Free)
Zeigt den Fortschritt von 0 bis Max. Ohne Value ist er unbestimmt.
ProgressCircular (Free)
Ring, der einen bestimmten Fortschrittswert zeigt. Für unbekannte Dauer nutzen Sie Spinner.
ResultPage (Free)
Eine Meldung auf ganzer Seite für ein Ergebnis: Erfolg, Fehler, Information, Warnung, Seite nicht gefunden, kein Zugriff und Serverfehler, mit Symbol, Titel, Text und Schaltflächen.
Skeleton (Free)
Platzhalter, der angezeigt wird, während Inhalte laden.
SkeletonPreset (Free)
Fertige Lade-Platzhalter: Karte, Liste, Tabelle, Profil und Absatz. Sie melden Screenreadern einen Beschäftigt-Zustand.
Spinner (Free)
Unbestimmter Ladeindikator mit lokalisiertem barrierefreiem Namen.
Content
Typography (Free)
Überschriften, Fließtext, Bildunterschriften und Overlines mit Schrift und Größen des Themes. Überschriften rendern echte h1- bis h6-Elemente.
Icon (Free)
Eine Bibliothek gängiger Symbole in einem einheitlichen Stil: 16-px-Raster, 1,5-px-Linien, eckige Enden.
Image (Free)
Bild mit verpflichtendem Alternativtext, Anpassungsmodi, optionalem Rahmen und Bildunterschrift. Verzögertes Laden ist standardmäßig aktiv.
ImageGallery (Free)
Raster aus Vorschaubildern, das eine Vollbildansicht (Lightbox) mit Zurück- und Weiter-Schaltflächen, Pfeiltasten und Escape öffnet.
Avatar (Free)
Quadratisches Benutzerabzeichen: Bild, aus einem Namen berechnete Initialen oder ein Standard-Benutzersymbol.
AvatarGroup (Free)
Überlappende Avatare für ein Team oder die Personen an einem Element. Mehr als Max Personen werden zu einem +n-Avatar zusammengefasst, dessen Hinweis die Namen auflistet.
Link (Free)
Gestalteter Anker. Externe Links öffnen in einem neuen Tab mit rel="noopener noreferrer" und zeigen ein Symbol.
Statistic (Free)
Große Zahl mit Beschriftung, optionalem Trend und zusätzlichem Inhalt wie einer Sparkline.
Descriptions (Free)
Schlüssel-Wert-Paare in einem Raster für die Details eines Datensatzes. Die Spalten klappen auf schmalen Bildschirmen zu einer zusammen.
Timeline (Free)
Senkrechte Folge von Ereignissen mit Marker, Zeit und optionaler Schweregradfarbe.
Carousel (Free)
Folien mit Zurück- und Weiter-Schaltflächen und Indikatoren. Automatische Wiedergabe ist optional; sie pausiert bei Hover und Fokus und hat eine Pause-Schaltfläche, wie WCAG es verlangt.
Countdown (Free)
Zählt bis zu einem Zeitpunkt herunter und löst OnFinished aus, wenn er erreicht ist.
Highlighter (Free)
Markiert jedes Vorkommen eines Suchtexts in einer Zeichenfolge, ohne Beachtung der Groß- und Kleinschreibung, außer CaseSensitive ist gesetzt.
Marquee (Free)
Laufband für kurze Mitteilungen. Es pausiert bei Hover und Fokus, hat eine Pause-Schaltfläche (WCAG 2.2.2) und hält vollständig an, wenn das System reduzierte Bewegung verlangt.
CodeBlock (Free)
Zeigt Quellcode mit leichter Syntaxfärbung (C#, JavaScript, TypeScript, JSON, HTML, SCSS, SQL und Shell), optional mit Zeilennummern und Kopieren-Schaltfläche.
Markdown (Free)
Zeigt Markdown-Text: Überschriften, Hervorhebungen, Links, Bilder, Listen (verschachtelt), Zitate, Code, Tabellen und Linien.
QrCode (Free)
Zeichnet einen QR-Code als einfaches SVG, ohne Bilddienst oder Skript. Text bis 2331 Byte (alle 40 Versionen, Fehlerkorrekturstufe M).
Barcode (Free)
Zeichnet Code 128 (alle druckbaren ASCII-Zeichen, Ziffern werden paarweise gepackt), Code 39 (Großbuchstaben, Ziffern und - . $ / + % Leerzeichen), EAN-13, EAN-8 und UPC-A (die Prüfziffer wird ergänzt oder, falls angegeben, geprüft) als einfaches SVG.
PricingTable (Free)
Plankarten mit Preis, Funktionsliste und Schaltfläche, mit optionalem Umschalter zwischen monatlicher und jährlicher Abrechnung.
CommentThread (Free)
Kommentare mit Antworten, einem Feld für einen neuen Kommentar und den Befehlen Antworten und Löschen. Text wird wie getippt angezeigt (Zeilenumbrüche bleiben, nichts wird als HTML behandelt).
ActivityFeed (Free)
Eine Liste dessen, was geschah und wer es getan hat, neueste zuerst, nach Tagen gruppiert, mit Symbol oder Initialen des Akteurs und optionaler Detailzeile.
Leichte Daten
Table (Free)
Einfache gestaltete HTML-Tabelle für statische Daten. Nutzen Sie DataGrid, wenn Sie Sortierung, Filterung oder Seitenwechsel brauchen.
List (Free)
Senkrechte Liste von Elementen mit Symbol, zwei Textzeilen und nachgestellter Aktion. Elemente werden zu Links oder Schaltflächen, wenn Href oder OnClick gesetzt ist.
Repeater (Free)
Zeigt eine Liste von Elementen mit Ihrer eigenen Vorlage. Es ergänzt, was einer einfachen Schleife fehlt: eine Kopfzeile, einen Leerzustand, ein Raster mit fester Spaltenzahl und optionalen Seitenwechsel (PageSize).
VirtualList (Free)
Eine scrollende Liste, die nur die sichtbaren Zeilen zeichnet, für Hunderttausende Einträge.
PropertyGrid (Free)
Bearbeitet die öffentlichen Eigenschaften eines beliebigen Objekts, nach Category gruppiert und mit DisplayName beschriftet.
Ziehen
Sortable (Free)
Liste, die sich durch Ziehen oder mit den Verschieben-Schaltflächen für Tastatur und Touch neu ordnen lässt.
Einstellungen
ThemeToggle (Free)
Fertige Umschalter für die Themes Light, Dark, Slate und Slate Dark (ThemeToggle geht sie nacheinander durch), die bequeme/kompakte Dichte (DensityToggle) und die Sprache en-US/bg-BG (LanguageToggle).
ThemeMenu (Free)
Ein Dropdown für Theme und Dichte: Slate, Slate Dark, Desktop, Desktop Dark, Mist, Mist Dark, Dark und Light, jeweils in normaler und kompakter Dichte.
DensityToggle (Free)
LanguageToggle (Free)
Hilfsmittel
BreakpointObserver (Free)
Sagt Ihrem Code, in welchem benannten Breakpoint (Xs bis Xxl) das Fenster ist, und rendert bei Änderung neu.
Fullscreen (Free)
Fügt eine Schaltfläche hinzu, die ihren Inhalt im Vollbild zeigt. Sie nutzt die Fullscreen-API und eine Vollfensterebene in Browsern ohne sie (einige Telefone).
Hotkey (Free)
Unsichtbare Komponente, die einen Callback für ein Tastenkürzel wie alt+k oder mod+shift+l ausführt (mod ist Strg unter Windows und Cmd unter macOS).
InfiniteScroll (Free)
Lädt weitere Inhalte, wenn das Ende einer Liste sichtbar wird. Es nutzt IntersectionObserver (mit Scroll-Rückfall) und löst OnLoadMore aus; setzen Sie Loading während des Abrufs und HasMore am Ende auf false.
ScrollToTop (Free)
Schwebende Schaltfläche, die nach dem Herunterscrollen erscheint und zum Seitenanfang zurückkehrt.
Daten
DataGrid (Complete)
Tabelle mit Sortierung (Klick auf eine Kopfzeile: aufsteigend, absteigend, aus), Filtern pro Spalte, Seitenwechsel, Zeilenauswahl und Vorlagen.
TreeList (Complete)
Ein Baum, dessen Knoten Tabellenzeilen sind. Auf- und Zuklappen, Sortieren, Filtern und Spaltenauswahl; die Tastatur folgt dem WAI-ARIA-Treegrid-Muster.
PivotGrid (Complete)
Fasst eine Liste zu einer Kreuztabelle zusammen: Felder in den Zeilen, Felder über die Spalten und Zahlen in den Zellen, mit Zwischen- und Gesamtsummen und einer Feldauswahl.
QueryBuilder (Complete)
Baut eine Abfrage aus verschachtelten Gruppen von Bedingungen, jede Gruppe mit AND oder OR verknüpft.
DataFilter (Complete)
Baut einen Filter aus Bedingungen (Feld, Operator, Wert) und gibt ihn als Prädikat zurück, sodass er mit jeder Liste und mit den Elementen von DataGrid funktioniert.
FileExplorer (Complete)
Dateibrowser für einen Speicher, den Ihr Code bereitstellt (eine Datenbank, ein Laufwerk oder eine Cloud).
FileManager (Complete)
Ordnerbaum, Pfad und Listen- oder Kachelansicht der Dateien im aktuellen Ordner, mit Suche, Sortierung, neuem Ordner, Umbenennen, Löschen und Upload.
Diagramme
LineChart (Complete)
Liniendiagramm mit mehreren Serien, optionaler Glättung und Flächenfüllung. Klicken Sie einen Legendeneintrag, um eine Serie aus- oder einzublenden.
AreaChart (Complete)
Gestapelte, prozentuale und überlappende Flächen. Gestapelte und prozentuale Flächen sind deckend, damit Summe und Anteile leicht zu lesen sind.
BarChart (Complete)
Gruppierte oder gestapelte Balken, senkrecht oder waagerecht, mit Unterstützung negativer Werte im gruppierten Modus.
ComboChart (Complete)
Balken und Linien auf gemeinsamen Achsen. Markieren Sie eine Serie mit AsLine, damit sie als Linie gezeichnet wird.
PieChart (Complete)
Kreis- oder Ringdiagramm. Segmente mit Wert null oder kleiner werden übersprungen, und Legendeneinträge blenden Segmente aus.
RadarChart (Complete)
Vergleicht mehrere Kennzahlen je Serie auf Speichen um ein Zentrum.
ScatterChart (Complete)
Punkte auf zwei numerischen Achsen. Klicken Sie einen Legendeneintrag, um eine Serie auszublenden; die Daten stehen für Screenreader auch als verborgene Tabelle bereit.
BubbleChart (Complete)
Ein Streudiagramm mit dritter Dimension: Die Fläche jedes quadratischen Markers folgt dem Größenwert.
Histogram (Complete)
Anzahl der Werte in gleichen Bereichen, als sich berührende Balken gezeichnet. Wählen Sie die Anzahl der Klassen oder die Klassenbreite und zeigen Sie Anzahlen oder Anteile.
BoxPlot (Complete)
Die Streuung einer Zahlengruppe. Die Box ist die mittlere Hälfte, die Linie der Median, die Whisker reichen bis zum entferntesten Wert innerhalb des 1,5-Fachen der Boxhöhe, einzelne Quadrate sind Ausreißer.
HeatmapChart (Complete)
Raster aus Zellen, deren Intensität den Wert zeigt. Text und Intensität sind so gewählt, dass der Kontrast in beiden Themes erhalten bleibt.
CalendarHeatmap (Complete)
Ein Jahr aus Tagen als kleine Quadrate, eine Spalte pro Woche, dunkler, wo der Wert höher ist.
TreemapChart (Complete)
Rechtecke, deren Flächen proportional zu den Werten sind, mit dem Squarified-Algorithmus angeordnet.
SunburstChart (Complete)
Hierarchie als konzentrische Ringe: Jeder Ring ist eine Ebene, und der Winkel eines Bogens ist proportional zu seiner Summe.
SankeyChart (Complete)
Flussdiagramm: Knoten werden nach ihrem Pfad in Spalten gesetzt, und die Linkbreiten sind proportional zur Menge.
FunnelChart (Complete)
Stufen, die sich nach ihren Werten verengen, mit dem Anteil der ersten Stufe.
WaterfallChart (Complete)
Eine laufende Summe mit Zunahmen, Abnahmen und Summen. Grün und Rot werden zusätzlich durch das Vorzeichen +/- an jedem Balken und in der Datentabelle unterschieden.
CandlestickChart (Complete)
Eröffnung, Hoch, Tief und Schluss je Zeitraum, optional mit Volumen. Ein steigender Zeitraum hat einen hohlen Körper, ein fallender einen gefüllten, die Bedeutung hängt also nicht allein von der Farbe ab.
Sparkline (Complete)
Winzige Trendlinie ohne Achsen, in der Größe passend für Text oder Tabellenzellen.
Gauge (Complete)
Bogenanzeige für einen einzelnen Wert mit optionalen farbigen Bereichen. Für Hilfstechnologien als Bild mit dem Wert als Beschriftung bereitgestellt.
LinearGauge (Complete)
Gerade Anzeige für einen einzelnen Wert, waagerecht oder senkrecht, mit optionalen farbigen Bereichen.
BulletChart (Complete)
Kompakter Fortschritt gegenüber einem Ziel: ein Balken pro Kennzahl mit qualitativen Bereichen und Zielmarke.
Map (Complete)
Eine Karte, als einfaches SVG aus GeoJSON gezeichnet. Regionen lassen sich nach einem Wert einfärben, Marker sitzen an Koordinaten, und der Benutzer kann eine Region wählen, zoomen und verschieben.
ChartDataTable (Complete)
ChartLegend (Complete)
ChartToolbar (Complete)
Diagramme (Schemata)
Diagram (Complete)
Flussdiagramme und Organigramme, als SVG gezeichnet. Kästen werden automatisch in Ebenen nach ihren Verbindungen platziert oder an den von Ihnen angegebenen X und Y.
Planung
Scheduler (Complete)
Tag-, Wochen-, Monats-, Agenda-, Jahres- und Zeitleistenansichten mit zeitlich platzierten Terminen, nebeneinander gesetzten überlappenden Terminen, Drag-and-drop zum Verschieben eines Termins, Umschalt mit Pfeiltasten als Tastaturweg.
SchedulerEventEditor (Complete)
Das Formular des Termindialogs von Scheduler: Titel, Beschreibung, Ort, ganztägig, Start und Ende, Ressource, Farbe, Erinnerung, Zeitzone und Wiederholung.
RecurrenceEditor (Complete)
Bearbeitet eine Wiederholungsregel (iCalendar RRULE): täglich, wöchentlich an gewählten Tagen, monatlich an einem Tag oder am n-ten Wochentag, jährlich; alle N Zeiträume; nie, nach einer Anzahl oder bis zu einem Datum.
Gantt (Complete)
Ein Projektplan: links eine Aufgabenliste, rechts Balken auf einer Zeitskala, mit Unteraufgaben, Fortschritt, Meilensteinen und Ende-Anfang-Abhängigkeiten.
Arbeitsbereich
Ribbon (Complete)
Die Befehlsleiste im Office-Stil: Tabs mit Befehlsgruppen, kontextabhängige Tabs, eine Schnellzugriffsleiste und ein minimierter Modus.
DockLayout (Complete)
Ein Arbeitsbereich aus Panels. Panels docken links, rechts, oben, unten oder in der Mitte an, teilen sich einen Bereich als Tabs, klappen zu einer Leiste ein oder schweben über dem Layout.
Window (Complete)
Ein schwebendes, nicht modales Fenster: verschieben, in der Größe ändern, minimieren, maximieren und mehrere gleichzeitig öffnen.
DashboardLayout (Complete)
Raster aus Kacheln, die der Benutzer mit Maus, Berührung oder Tastatur verschiebt und in der Größe ändert (Alt mit Pfeiltasten verschiebt, Alt mit Umschalt ändert die Größe).
DesktopShell (Complete)
Eine Anwendungshülle mit Hintergrundebene und Taskleiste unten. Die vier Desktop-Themes (Desktop, Desktop Dark, Mist, Mist Dark) geben ihr abgerundete Ecken, weiche Schatten und durchscheinende Flächen.
Taskbar (Complete)
Die Leiste am unteren Seitenrand mit Startbereich, Modulnamen, mittlerem Bereich und Infobereich.
Kanban (Complete)
Board mit Spalten. Karten wandern per Ziehen oder mit den Pfeilschaltflächen; das Board löst OnMove aus und Sie aktualisieren Ihre Daten, sodass es immer Ihren Zustand widerspiegelt.
Chat (Complete)
Nachrichtenliste mit Eingabefeld. Die Liste ist eine Live-Region, die zur neuesten Nachricht scrollt, Text wird stets als reiner Text angezeigt, Enter sendet und Umschalt+Enter fügt eine neue Zeile ein (MultiLine=false macht daraus eine einzelne Zeile).
MailView (Complete)
Zeigt das HTML einer von außen kommenden E-Mail. Das HTML läuft in einem Sandbox-Frame ohne Skripte, mit strenger Content-Security-Policy, sodass es die Seite der Anwendung nicht berühren kann.
MessageEditor (Complete)
Ein leichter Editor zum Schreiben einer Nachricht: fett, kursiv, unterstrichen, Listen, Zitat, Link und Formatierung entfernen, mit einem Umschalter auf reinen Text.
Office
PdfViewer (Complete)
Ein Betrachter für jede PDF-Version bis 2.0 (ISO 32000-2): fortlaufende Seiten, Zoom und Drehung, Miniaturen, Lesezeichen, Suche, Textauswahl, Links, Anmerkungen, Formularfelder, Ebenen, Anhänge.
PdfCompare (Complete)
Vergleicht den Text zweier Versionen einer PDF-Datei Seite für Seite und listet nebeneinander auf, was hinzugefügt, entfernt und geändert wurde.
DocumentEditor (Complete)
Eine Textverarbeitung, die .docx (und das ältere .doc), Rich Text Format (.rtf) und OpenDocument (.odt) öffnet und speichert.
RichTextEditor (Complete)
Ein kompakter Editor für formatierten Text in einem Formular: Er hat einen Value wie ein Textfeld, aber der Text kann fett, kursiv, eine Liste, ein Link, ein Bild oder eine Tabelle sein.
PresentationEditor (Complete)
Ein Präsentationseditor, der .pptx (und das ältere .ppt) sowie OpenDocument (.odp) öffnet und speichert.
Spreadsheet (Complete)
Eine vollständige Tabellenkalkulation: Formeln und Funktionen, Formatierung, verbundene Zellen, fixierte Bereiche, Diagramme, bedingte Formatierung, Datenüberprüfung, mehrere Blätter, Rückgängig und Wiederholen, Kopieren und Einfügen, Ausfüllen, Sortieren.
ProofingPanel (Complete)
Die Liste der Rechtschreib-, Grammatik- und Logikprobleme, die PDF-Betrachter, Dokumenteditor, Tabellenkalkulation und Präsentationseditor zeigen.
DataGridSpreadsheetButton (Complete)
Eine Symbolleistenschaltfläche für ein DataGrid, die die Zeilen des Rasters (alle Seiten, nach Filterung und Sortierung, nur sichtbare Spalten) als .xlsx-Datei speichert.
DataGridPdfButton (Complete)
SchedulerPdfButton (Complete)
ReportButton (Complete)
SlideView (Complete)
PasswordPrompt (Complete)
KI-Assistenten
RayCraft hat keine eigenen KI-Funktionen. Die Dokumentation ist so aufgebaut, dass KI-Coding-Assistenten sie gut nutzen können:
- Aussagekräftige Namen der Steuerelemente, zum Beispiel DatePicker, Autocomplete und Dialog.
- Eine Seite pro Steuerelement mit einer Zusammenfassung in einfacher Sprache und, für die meisten Steuerelemente, einem kurzen Beispiel.
- Ein reiner Textindex aller Steuerelemente unter llms.txt.
- Strukturierte Daten (JSON-LD) und eine Beschreibung auf jeder Seite.
Prüfen Sie generierten Code anhand der Seite des Steuerelements: Ein Assistent kann sich weiterhin irren.