Zum Inhalt springen
BIBLIOTHEK

Steuerelemente für echte Anwendungen

Tabellen, Diagramme, Planer, Editoren und mehr. Jedes Steuerelement hat eine eigene Seite in einfacher Sprache, leicht lesbar für Entwickler und für KI-Assistenten.

Schaltflächen 9 Steuerelemente

001 ButtonFree Die Schaltfläche, auf der Ihre ganze App aufbaut: drei Stile, sechs Farben, Symbole und Schutz vor Doppelklicks.002 IconButtonFree Eine kompakte Schaltfläche für Symbolleisten, mit eingebautem barrierefreiem Namen.003 ButtonGroupFree Verwandte Aktionen zu einem aufgeräumten Steuerelement verbinden, bereit für Ansichtsumschalter.004 ToggleButtonFree Eine Schaltfläche, die an oder aus bleibt.005 SplitButtonFree Eine Hauptaktion mit verwandten Aktionen einen Klick entfernt.006 FloatingActionButtonFree Die wichtigste Aktion immer in Reichweite halten.007 SpeedDialFree Eine schwebende Schaltfläche, die eine kurze Liste von Aktionen öffnet.008 ProgressButtonFree Eine Schaltfläche, die ihren eigenen Fortschritt zeigt, während Arbeit läuft.009 CopyButtonFree Ein Klick zum Kopieren, mit klarer Bestätigung.

Text und Zahlen 9 Steuerelemente

010 TextFieldFree Das Textfeld, auf dem Ihre Formulare aufbauen, mit Validierungsmeldungen darunter.011 NumericFieldFree Zahleneingabe, die Grenzen und das Format Ihrer Benutzer beachtet.012 PercentFieldFree Prozentwerte natürlich eingeben, während der Wert ein sauberer Bruch bleibt.013 MoneyFieldFree Beträge so eingeben, wie Ihre Benutzer sie schreiben, in ihrer eigenen Kultur.014 MaskedInputFree Menschen führen, Telefonnummern, Codes und Kennungen im richtigen Format einzugeben.015 OtpInputFree Ein Feld pro Zeichen für Bestätigungscodes, mit flüssiger Eingabe und Einfügen.016 SearchBoxFree Suche mit Symbol, Löschen-Schaltfläche und Ihrer eigenen Suchaktion.017 PasswordStrengthFree Zeigen Sie, wie stark ein Passwort ist und welche Regeln es erfüllt.018 InPlaceEditorFree Einen Wert dort bearbeiten, wo er angezeigt wird: klicken, ändern, speichern.

Listenauswahl 10 Steuerelemente

019 SelectFree Einen Eintrag aus einem Dropdown wählen, für jeden Werttyp.020 DropDownListFree Aus Listen beliebiger Länge wählen, selbst aus Hunderttausenden Einträgen, ohne Verzögerung.021 MultiSelectFree Mehrere Einträge aus einem Dropdown wählen, mit „Alle auswählen“ und „Leeren“.022 ListBoxFree Eine immer sichtbare Liste für eine oder mehrere Auswahlen.023 AutocompleteFree Bringen Sie Benutzer schneller zur richtigen Antwort, indem eine lange Liste beim Tippen eingegrenzt wird.024 MultiColumnComboBoxFree In einer Liste suchen, die mehrere Spalten gleichzeitig zeigt.025 CascaderFree Benutzer wählen aus einer Hierarchie, Ebene für Ebene.026 DropDownTreeFree Einen Knoten einer Hierarchie aus einem kompakten Dropdown wählen.027 TagInputFree Freie Tags mit Enter oder Komma hinzufügen.028 MentionFree Kollegen mit @ direkt in einem Textfeld markieren.

Schieberegler und Bewertung 5 Steuerelemente

029 SliderFree Eine Zahl durch Ziehen wählen.030 RangeSliderFree Einen unteren und einen oberen Wert mit einem Steuerelement wählen.031 RangeSelectorFree Mit zwei Griffen ein Intervall einer Datenreihe wählen.032 RatingFree Sternebewertungen mit einem Klick erfassen.033 RatingDisplayFree Bewertungen mit halben Sternen, einer Zahl und der Anzahl der Rezensionen zeigen.

Farbe und Datei 5 Steuerelemente

034 ColorPickerFree Benutzer wählen Farben mit einem Auswahlfenster, einem Hex-Code oder fertigen Vorgaben.035 ColorPaletteFree Ein Raster aus Farbfeldern, schnell zu überblicken und einfach per Tastatur zu bedienen.036 ColorButtonFree Eine vertraute Farbschaltfläche der Symbolleiste, die immer die gewählte Farbe zeigt.037 FileUploadFree Dateien per Drag-and-drop ablegen oder auswählen, mit eingebauter Prüfung von Größe und Typ.038 SignaturePadFree Handschriftliche Unterschriften mit Maus, Finger oder Stift erfassen.

Editoren 2 Steuerelemente

039 MarkdownEditorFree Markdown schreiben mit Symbolleiste und Live-Vorschau.040 AddressFieldFree Nachrichten in Sekunden adressieren: Jede Adresse wird zu einem klaren Chip, mit Vorschlägen beim Tippen.

Auswahl 9 Steuerelemente

041 CheckboxFree Ein einfaches Ja oder Nein, das mit Ihren Formularen und der Validierung funktioniert.042 CheckboxGroupFree Benutzer wählen mehrere Einträge aus einer Liste, klar beschriftet.043 RadioFree Eine einzelne Option einer Radiogruppe, wenn jede Wahl eine eigene Beschriftung oder einen eigenen Inhalt braucht.044 RadioGroupFree Eine klare Wahl aus einer kurzen Liste.045 SwitchFree Ein klarer Ein-Aus-Schalter.046 ChipFree Kompakte Labels für Tags und Filter, entfernbar, wenn nötig.047 ChipSetFree Chips zu Filtern machen, die Benutzer einzeln oder mehrfach auswählen.048 ToggleGroupFree Ein segmentiertes Steuerelement für Ansichtsumschalter und Auswahlen.049 TransferListFree Einträge zwischen zwei Listen verschieben, um eine Teilmenge auszuwählen.

Datum und Zeit 12 Steuerelemente

050 CalendarFree Ein Kalender, der sich in Ihre Seiten einfügt, in der Sprache Ihrer Benutzer.051 DatePickerFree Ein Datum aus einem Kalender wählen, in der Sprache und im Format, die Ihre Benutzer kennen.052 DateTimePickerFree Datum und Uhrzeit in einem Feld wählen.053 DateTimeRangePickerFree Einen Zeitraum in einem Kalender mit zwei Monaten wählen, mit schnellen Bereichen.054 MonthPickerFree Monat und Jahr wählen, ohne einen Tag zu wählen.055 YearPickerFree Ein Jahr aus einem klaren Raster wählen.056 WeekPickerFree Eine ganze Woche mit einem Klick wählen.057 TimeFieldFree Ein Zeitfeld im Format der Sprache des Benutzers.058 TimePickerFree Eine Uhrzeit im erwarteten Format eingeben.059 TimeRangePickerFree Start- und Endzeit in einem Feld wählen.060 TimeSpanPickerFree Eine Dauer in Tagen, Stunden, Minuten und Sekunden eingeben.061 EventCalendarFree Eine Monatsansicht mit Terminen, die man auf einen Blick lesen kann.

Formulare 7 Steuerelemente

062 ErrorSummaryFree Alle Formularfehler an einer klaren Stelle sammeln.063 FormLayoutFree Beschriftungen und Felder in einem responsiven Raster mit betitelten Abschnitten anordnen.064 FormStateFree Ein ganzes Formular mit einer einzigen Einstellung sperren oder einfrieren.065 LoginFormFree Ein fertiges Anmeldeformular mit freundlicher Validierung.066 RegisterFormFree Ein fertiges Registrierungsformular mit freundlicher Validierung.067 CaptchaFree Eine leichte erste Prüfung gegen einfache Bots, ohne externen Dienst.068 FormBuilderFree Formulare aus einer Liste von Felddefinitionen statt aus Markup bauen.

Layout 15 Steuerelemente

069 ContainerFree Inhalte auf jedem Bildschirm in angenehmer Breite halten.070 StackFree Elemente in Zeile oder Spalte mit gleichmäßigen Abständen anordnen.071 GridFree Ein 12-Spalten-Raster, das sich mit der Bildschirmgröße ändert.072 GridItemFree Eine Zelle des Rasters, mit ihrer Breite für jede Bildschirmgröße über ein paar einfache Werte gesetzt.073 SpacerFree Elemente ans Ende einer Zeile schieben.074 DividerFree Eine dünne Linie, die Inhalten Raum zum Atmen gibt.075 CardFree Ein sauberer Container, der zusammengehörige Inhalte mit Kopf- und Fußzeile gruppiert.076 PanelFree Ein betitelter Abschnitt, der sich einklappen lässt und eigene Aktionen trägt.077 FieldsetFree Zusammengehörige Felder unter einer klaren Überschrift gruppieren.078 ToolbarFree Eine Zeile von Werkzeugen, bereit für die Tastatur.079 SplitterFree Größenveränderbare Bereiche, die Benutzer mit Maus, Berührung oder Tastatur anpassen.080 AccordionFree Lange Seiten übersichtlich halten: jeweils einen Abschnitt zeigen oder mehrere, wenn Ihre Benutzer das bevorzugen.081 CollapseFree Details nur zeigen, wenn Benutzer sie anfordern.082 TagCloudFree Wörter in Größen zeigen, die ihrer Wichtigkeit folgen.083 TitleIndexFree Eine nach Anfangsbuchstaben gruppierte Liste mit schneller Buchstabenleiste.

Navigation 19 Steuerelemente

084 AppBarFree Eine saubere obere Leiste, die sich von breiten Desktops bis zu kleinen Telefonen anpasst.085 DrawerFree Ein Seitenpanel für Navigation oder Details, das nicht im Weg ist.086 NavMenuFree Senkrechte Navigation, die die aktuelle Seite hervorhebt.087 NavItemFree Ein Link im Navigationsmenü, mit Symbol und Beschriftung, hervorgehoben, wenn seine Seite geöffnet ist.088 NavGroupFree Eine einklappbare Gruppe von Links im Navigationsmenü, damit lange Menüs übersichtlich bleiben.089 TabsFree Inhalte in Panels gliedern, zwischen denen Benutzer wechseln.090 StepperFree Benutzer Schritt für Schritt durch einen Ablauf führen.091 WizardFree Benutzer durch einen Ablauf mit Schritten führen, die geprüft oder übersprungen werden können.092 BreadcrumbsFree Zeigen Sie immer, wo der Benutzer ist, und bieten Sie einen Weg zurück mit einem Klick.093 MenuFree Eine Schaltfläche, die eine klare Liste von Aktionen öffnet.094 MenuItemFree Ein Eintrag in einem Menü, mit optionalem Symbol, bereit für Tastatur und Maus.095 ContextMenuFree Die richtigen Aktionen unter die rechte Maustaste legen.096 MenuBarFree Eine klassische Menüleiste für Anwendungen mit Tastenkürzeln und Untermenüs.097 CommandContextMenuFree Rechtsklick-Menüs mit Tastenkürzeln, Häkchen und Untermenüs, aus einer Befehlsliste gebaut.098 TextContextMenuFree Ein vertrautes Rechtsklick-Menü für Textfelder.099 ProfileMenuFree Den angemeldeten Benutzer mit Avatar, Namen und Menü zeigen.100 PaginationFree Seite für Seite durch lange Listen blättern.101 TreeViewFree Hierarchien, die sich leicht per Tastatur oder Maus durchsuchen lassen.102 ScrollSpyFree Ein Inhaltsverzeichnis, das dem Leser durch eine lange Seite folgt.

Überlagerungen 10 Steuerelemente

103 DialogFree Fokussierte Dialoge, die Benutzer auf Kurs halten und mit der Tastatur funktionieren.104 DialogHostFree Der Ort, an dem Dialoge erscheinen.105 PopoverFree Ein schwebendes Panel für zusätzliche Details, griffbereit.106 TooltipFree Ein kurzer Hinweis beim Darüberfahren oder Fokussieren, ohne Skript.107 OverlayFree Die Seite abdunkeln, um die Aufmerksamkeit zu lenken.108 LightboxFree Ein Vollbild-Betrachter für Bilder, mit Zurück- und Weiter-Schaltflächen, Pfeiltasten und Escape.109 TourFree Neue Benutzer Schritt für Schritt durch Ihre App führen.110 ColorDialogFree Fragen Sie den Benutzer in einem fertigen Dialog nach einer Farbe, mit einer Zeile Code.111 FontDialogFree Fragen Sie den Benutzer in einem fertigen Dialog nach einer Schriftart, mit einer Zeile Code.112 SnackbarHostFree Der Ort, an dem kurze Meldungen erscheinen.

Rückmeldung 12 Steuerelemente

113 AlertFree Sagen Sie, was zählt, im richtigen Ton: klare Meldungen für Erfolg, Warnungen und Fehler.114 BadgeFree Ein kleines Statuslabel, das den Zustand in Listen und Menüs offensichtlich macht.115 BusyOverlayFree Benutzer beim Laden informiert halten und versehentliche Klicks verhindern.116 CookieConsentFree Höflich nach der Cookie-Auswahl fragen und die Antwort merken.117 EmptyStateFree Eine leere Seite in einen hilfreichen nächsten Schritt verwandeln.118 NotificationCenterFree Eine Glocke mit der Zahl ungelesener Benachrichtigungen und einem Panel dazu.119 ProgressBarFree Zeigen, wie weit etwas fortgeschritten ist.120 ProgressCircularFree Ein Ring, der den Fortschritt auf einen Blick zeigt.121 ResultPageFree Benutzern sagen, wie es lief: Erfolg, Fehler, nicht gefunden oder kein Zugriff.122 SkeletonFree Platzhalter, die das Laden schneller wirken lassen.123 SkeletonPresetFree Fertige Lade-Platzhalter für Karten, Listen, Tabellen und Profile.124 SpinnerFree Ein klares Zeichen, dass etwas lädt.

Content 21 Steuerelemente

125 TypographyFree Überschriften und Text, die in Ihrer App konsistent bleiben.126 IconFree Eine einheitliche Bibliothek von Symbolen in einem sauberen Stil.127 ImageFree Bilder mit verpflichtendem Alternativtext, Bildunterschriften und verzögertem Laden.128 ImageGalleryFree Ein Raster aus Vorschaubildern, das sich in einer Vollbildansicht öffnet.129 AvatarFree Ein Gesicht oder Initialen neben jedem Namen machen Listen persönlicher.130 AvatarGroupFree Ein ganzes Team auf kleinem Raum zeigen, mit einem einfachen +n für den Rest.131 LinkFree Links, die gut aussehen und externe Adressen sicher behandeln.132 StatisticFree Große Zahlen mit Beschriftung und Trend, gemacht für Dashboards.133 DescriptionsFree Die Details eines Datensatzes in einem ordentlichen Raster zeigen, das auch auf kleine Bildschirme passt.134 TimelineFree Die Geschichte eines Datensatzes als senkrechte Folge von Ereignissen erzählen.135 CarouselFree Highlights als Folien zeigen, mit Steuerung, die Benutzer pausieren können.136 CountdownFree Herunterzählen bis zu einem Start, einer Frist oder einem Angebot.137 HighlighterFree Suchtreffer im Text markieren, damit Benutzer sie sofort finden.138 MarqueeFree Ein Lauftext für kurze Mitteilungen, den Benutzer anhalten können.139 CodeBlockFree Code lesbar anzeigen, mit leichter Syntaxfärbung.140 MarkdownFree Markdown-Text schön anzeigen, mit sicherer Behandlung von Links und HTML.141 QrCodeFree QR-Codes in Ihrer Seite erzeugen, ohne Bilddienst.142 BarcodeFree Scannbare Barcodes direkt aus Ihrer App drucken, ohne Bilddienst.143 PricingTableFree Plankarten mit Preisen, Funktionen und einem Umschalter monatlich oder jährlich.144 CommentThreadFree Diskussionen zu jedem Datensatz, mit Antworten und einem Feld für neue Kommentare.145 ActivityFeedFree Zeigen Sie, wer wann was getan hat, nach Tagen gruppiert, damit Teams immer wissen, was sich geändert hat.

Leichte Daten 5 Steuerelemente

146 TableFree Eine ordentliche Tabelle für einfache, statische Daten.147 ListFree Listen mit Symbolen, zwei Textzeilen und Aktionen in jeder Zeile.148 RepeaterFree Eine Liste mit eigener Vorlage, Kopfzeile und Meldung für leere Listen zeigen.149 VirtualListFree Hunderttausende Einträge flüssig scrollen.150 PropertyGridFree Die Eigenschaften beliebiger Objekte in einer aufgeräumten gruppierten Liste bearbeiten.

Ziehen 1 Steuerelemente

151 SortableFree Benutzer ordnen eine Liste per Ziehen oder mit Schaltflächen neu.

Einstellungen 4 Steuerelemente

152 ThemeToggleFree Mit einem Klick zwischen hellem und dunklem Theme wechseln.153 ThemeMenuFree Benutzer wählen Theme und Dichte in einem Menü.154 DensityToggleFree Lassen Sie Benutzer zwischen bequemer und kompakter Dichte der ganzen Anwendung wählen.155 LanguageToggleFree Wechseln Sie die Sprache der gesamten Oberfläche, Englisch oder Bulgarisch, mit einem Steuerelement.

Hilfsmittel 5 Steuerelemente

156 BreakpointObserverFree Layouts bauen, die mit einem einzigen einfachen Signal auf die Bildschirmgröße reagieren.157 FullscreenFree Benutzer vergrößern Diagramme, Bilder oder Editoren auf den ganzen Bildschirm.158 HotkeyFree Tastenkürzel hinzufügen, die Vielnutzer lieben werden.159 InfiniteScrollFree Weitere Inhalte nachladen, wenn der Leser das Ende einer Liste erreicht.160 ScrollToTopFree Eine Schaltfläche, die Leser zurück nach oben bringt.

Bereit, etwas zu bauen mit RayCraft?

Starten Sie kostenlos oder erzählen Sie uns von Ihrem Projekt.

Kostenlos loslegen