Naar de inhoud
BIBLIOTHEEK

Besturingselementen voor echte toepassingen

Rasters, grafieken, planners, editors en meer. Elk besturingselement heeft een eigen pagina in gewone taal, makkelijk te lezen voor ontwikkelaars en voor AI-assistenten.

AlleFreeComplete
KnoppenTekst en getallenKeuze uit lijstSchuifregelaars en beoordelingKleur en bestandEditorsKeuzeDatum en tijdFormulierenLay-outNavigatieOverlaysFeedbackContentLichte gegevensSlepenVoorkeurenHulpmiddelen

Knoppen 9 besturingselementen

001 ButtonFree De knop waarop je hele app bouwt: drie stijlen, zes kleuren, pictogrammen en bescherming tegen dubbelklikken.002 IconButtonFree Een compacte knop voor werkbalken, met ingebouwde toegankelijke naam.003 ButtonGroupFree Voeg verwante acties samen tot één nette besturing, klaar voor weergaveschakelaars.004 ToggleButtonFree Een knop die aan of uit blijft staan.005 SplitButtonFree Een hoofdactie met verwante acties één klik verder.006 FloatingActionButtonFree Houd de belangrijkste actie altijd binnen handbereik.007 SpeedDialFree Een zwevende knop die een korte lijst met acties opent.008 ProgressButtonFree Een knop die zijn eigen voortgang toont terwijl er gewerkt wordt.009 CopyButtonFree Eén klik om te kopiëren, met duidelijke bevestiging.

Tekst en getallen 9 besturingselementen

010 TextFieldFree Het tekstvak waarop je formulieren gebouwd zijn, met validatieberichten eronder.011 NumericFieldFree Getalinvoer die grenzen en het formaat van je gebruikers respecteert.012 PercentFieldFree Typ percentages natuurlijk terwijl de waarde een nette breuk blijft.013 MoneyFieldFree Typ bedragen zoals je gebruikers ze schrijven, in hun eigen cultuur.014 MaskedInputFree Begeleid mensen bij het typen van telefoonnummers, codes en id's in het juiste formaat.015 OtpInputFree Eén vak per teken voor verificatiecodes, met soepel typen en plakken.016 SearchBoxFree Zoeken met een pictogram, een wisknop en je eigen zoekactie.017 PasswordStrengthFree Toon hoe sterk een wachtwoord is en aan welke regels het voldoet.018 InPlaceEditorFree Bewerk een waarde precies waar die wordt getoond: klikken, wijzigen, opslaan.

Keuze uit lijst 10 besturingselementen

019 SelectFree Kies één item uit een keuzelijst, voor elk type waarde.020 DropDownListFree Kies uit lijsten van elke lengte, zelfs honderdduizenden items, zonder vertraging.021 MultiSelectFree Kies meerdere items uit een keuzelijst, met Alles selecteren en Wissen.022 ListBoxFree Een altijd zichtbare lijst, voor één keuze of meerdere.023 AutocompleteFree Breng mensen sneller bij het juiste antwoord door een lange lijst te verkleinen terwijl ze typen.024 MultiColumnComboBoxFree Zoek in een lijst die meerdere kolommen tegelijk toont.025 CascaderFree Laat gebruikers kiezen uit een hiërarchie, niveau voor niveau.026 DropDownTreeFree Kies één knooppunt van een hiërarchie uit een compacte keuzelijst.027 TagInputFree Voeg vrije tags toe met Enter of een komma.028 MentionFree Tag collega's met @ rechtstreeks in een tekstvak.

Schuifregelaars en beoordeling 5 besturingselementen

029 SliderFree Kies een getal door te slepen.030 RangeSliderFree Kies een onder- en een bovenwaarde met één besturing.031 RangeSelectorFree Kies een interval van een gegevensreeks met twee handvatten.032 RatingFree Verzamel sterrenbeoordelingen met één klik.033 RatingDisplayFree Toon beoordelingen met halve sterren, een score en het aantal reviews.

Kleur en bestand 5 besturingselementen

034 ColorPickerFree Laat gebruikers kleuren kiezen met een kiezer, een hexcode of kant-en-klare voorinstellingen.035 ColorPaletteFree Een raster van kleurstalen dat snel te scannen en makkelijk met het toetsenbord te gebruiken is.036 ColorButtonFree Een vertrouwde kleurknop voor de werkbalk die altijd de gekozen kleur toont.037 FileUploadFree Sleep bestanden hierheen of kies ze, met ingebouwde controle op grootte en type.038 SignaturePadFree Verzamel handgeschreven handtekeningen met muis, vinger of pen.

Editors 2 besturingselementen

039 MarkdownEditorFree Schrijf Markdown met een werkbalk en een live voorbeeld.040 AddressFieldFree Adresseer een bericht in seconden: elk adres wordt een duidelijke chip, met suggesties tijdens het typen.

Keuze 9 besturingselementen

041 CheckboxFree Een simpel ja of nee dat werkt met je formulieren en validatie.042 CheckboxGroupFree Laat gebruikers meerdere items uit een lijst kiezen, duidelijk gelabeld.043 RadioFree Eén optie van een radiogroep, voor wanneer elke keuze een eigen label of inhoud nodig heeft.044 RadioGroupFree Eén duidelijke keuze uit een korte lijst.045 SwitchFree Een duidelijke aan-uitschakelaar.046 ChipFree Compacte labels voor tags en filters, verwijderbaar wanneer nodig.047 ChipSetFree Maak van chips filters die mensen één of meerdere tegelijk kunnen selecteren.048 ToggleGroupFree Een gesegmenteerde besturing voor weergaveschakelaars en keuzes.049 TransferListFree Verplaats items tussen twee lijsten om een deelverzameling te kiezen.

Datum en tijd 12 besturingselementen

050 CalendarFree Een kalender die in je pagina's past, in de taal van je gebruikers.051 DatePickerFree Kies een datum uit een kalender, in de taal en het formaat die je gebruikers kennen.052 DateTimePickerFree Kies datum en tijd in één veld.053 DateTimeRangePickerFree Selecteer een periode op één kalender met twee maanden, met snelle bereiken.054 MonthPickerFree Kies een maand en een jaar zonder een dag te kiezen.055 YearPickerFree Kies een jaar uit een duidelijk raster.056 WeekPickerFree Kies een hele week met één klik.057 TimeFieldFree Een tijdvak in het formaat van de taal van de gebruiker.058 TimePickerFree Voer een tijd in zoals je gebruikers verwachten.059 TimeRangePickerFree Kies een begin- en eindtijd in één veld.060 TimeSpanPickerFree Voer een duur in dagen, uren, minuten en seconden in.061 EventCalendarFree Een maandweergave met afspraken die je in één oogopslag leest.

Formulieren 7 besturingselementen

062 ErrorSummaryFree Verzamel alle formulierfouten op één duidelijke plek.063 FormLayoutFree Rangschik labels en velden in een responsief raster met sectiekoppen.064 FormStateFree Vergrendel of bevries een heel formulier met één instelling.065 LoginFormFree Een kant-en-klaar inlogformulier met vriendelijke validatie.066 RegisterFormFree Een kant-en-klaar registratieformulier met vriendelijke validatie.067 CaptchaFree Een lichte eerste controle tegen simpele bots, zonder externe dienst.068 FormBuilderFree Bouw formulieren uit een lijst met velddefinities in plaats van markup.

Lay-out 15 besturingselementen

069 ContainerFree Houd inhoud op een prettige breedte op elk scherm.070 StackFree Rangschik items in een rij of kolom met gelijkmatige tussenruimte.071 GridFree Een raster van 12 kolommen dat verandert met de schermgrootte.072 GridItemFree Eén cel van het raster, met zijn breedte voor elke schermgrootte ingesteld met een paar eenvoudige waarden.073 SpacerFree Duw items naar het uiteinde van een rij.074 DividerFree Een dunne lijn die inhoud ruimte geeft om te ademen.075 CardFree Een nette container die verwante inhoud groepeert met koptekst en voettekst.076 PanelFree Een sectie met titel die kan inklappen en eigen acties draagt.077 FieldsetFree Groepeer verwante velden onder een duidelijke kop.078 ToolbarFree Een rij gereedschappen, klaar voor het toetsenbord.079 SplitterFree Aanpasbare vensters die gebruikers met muis, aanraking of toetsenbord bijstellen.080 AccordionFree Houd lange pagina's overzichtelijk: toon één sectie tegelijk, of meerdere als je gebruikers dat willen.081 CollapseFree Toon details alleen wanneer gebruikers erom vragen.082 TagCloudFree Toon woorden in groottes die hun belang volgen.083 TitleIndexFree Een lijst gegroepeerd op beginletter met een snelle lettersbalk.

Navigatie 19 besturingselementen

084 AppBarFree Een nette bovenbalk die zich aanpast van brede desktops tot kleine telefoons.085 DrawerFree Een zijpaneel voor navigatie of details dat niet in de weg zit.086 NavMenuFree Verticale navigatie die de huidige pagina markeert.087 NavItemFree Eén link in het navigatiemenu, met pictogram en label, gemarkeerd wanneer zijn pagina open is.088 NavGroupFree Een inklapbare groep links in het navigatiemenu, zodat lange menu's makkelijk te scannen blijven.089 TabsFree Orden inhoud in panelen waartussen gebruikers wisselen.090 StepperFree Leid gebruikers stap voor stap door een proces.091 WizardFree Leid gebruikers door een proces met stappen die gecontroleerd of overgeslagen kunnen worden.092 BreadcrumbsFree Toon altijd waar de gebruiker is en bied met één klik een weg terug.093 MenuFree Een knop die een duidelijke lijst met acties opent.094 MenuItemFree Eén item in een menu, met optioneel pictogram, klaar voor toetsenbord en muis.095 ContextMenuFree Zet de juiste acties onder de rechtermuisknop.096 MenuBarFree Een klassieke menubalk voor toepassingen met sneltoetsen en submenu's.097 CommandContextMenuFree Rechtsklikmenu's met sneltoetsen, vinkjes en submenu's, gebouwd uit één lijst met opdrachten.098 TextContextMenuFree Een vertrouwd rechtsklikmenu voor tekstvelden.099 ProfileMenuFree Toon de aangemelde gebruiker met avatar, naam en menu.100 PaginationFree Blader pagina voor pagina door lange lijsten.101 TreeViewFree Hiërarchieën die makkelijk met toetsenbord of muis te doorlopen zijn.102 ScrollSpyFree Een inhoudsopgave die de lezer door een lange pagina volgt.

Overlays 10 besturingselementen

103 DialogFree Gerichte dialogen die gebruikers op koers houden en met het toetsenbord werken.104 DialogHostFree De plek waar dialogen verschijnen.105 PopoverFree Een zwevend paneel voor extra details, bij de hand.106 TooltipFree Een korte tip bij aanwijzen of focus, zonder script.107 OverlayFree Verduister de pagina om de aandacht te richten.108 LightboxFree Een viewer op volledig scherm voor afbeeldingen, met vorige- en volgende-knoppen, pijltoetsen en Esc.109 TourFree Leid nieuwe gebruikers stap voor stap door je app.110 ColorDialogFree Vraag de gebruiker om een kleur in een kant-en-klaar dialoog, met één regel code.111 FontDialogFree Vraag de gebruiker om een lettertype in een kant-en-klaar dialoog, met één regel code.112 SnackbarHostFree De plek waar korte berichten verschijnen.

Feedback 12 besturingselementen

113 AlertFree Zeg wat ertoe doet, in de juiste toon: duidelijke berichten voor succes, waarschuwingen en fouten.114 BadgeFree Een klein statuslabel dat de toestand in lijsten en menu's duidelijk maakt.115 BusyOverlayFree Houd gebruikers op de hoogte terwijl iets laadt en voorkom onbedoelde klikken.116 CookieConsentFree Vraag netjes om cookiekeuzes en onthoud het antwoord.117 EmptyStateFree Maak van een lege pagina een nuttige volgende stap.118 NotificationCenterFree Een bel met het aantal ongelezen meldingen en een paneel om ze te bekijken.119 ProgressBarFree Toon hoe ver iets gevorderd is.120 ProgressCircularFree Een ring die de voortgang in één oogopslag toont.121 ResultPageFree Vertel gebruikers hoe het ging: gelukt, fout, niet gevonden of geen toegang.122 SkeletonFree Plaatshouders die het laden sneller laten voelen.123 SkeletonPresetFree Kant-en-klare laadplaatshouders voor kaarten, lijsten, tabellen en profielen.124 SpinnerFree Een duidelijk teken dat iets laadt.

Content 21 besturingselementen

125 TypographyFree Koppen en tekst die consistent blijven in je hele app.126 IconFree Een consistente bibliotheek van pictogrammen in één nette stijl.127 ImageFree Afbeeldingen met verplichte alternatieve tekst, bijschriften en uitgesteld laden.128 ImageGalleryFree Een raster van miniaturen dat opent in een viewer op volledig scherm.129 AvatarFree Zet een gezicht of initialen naast elke naam en maak lijsten persoonlijker.130 AvatarGroupFree Toon een heel team op weinig ruimte, met een simpele +n voor de rest.131 LinkFree Links die er goed uitzien en externe adressen veilig afhandelen.132 StatisticFree Grote getallen met label en trend, gemaakt voor dashboards.133 DescriptionsFree Toon de details van een record in een nette tabel die ook op kleine schermen past.134 TimelineFree Vertel het verhaal van een record als een verticale reeks gebeurtenissen.135 CarouselFree Toon hoogtepunten als dia's, met besturing die mensen kunnen pauzeren.136 CountdownFree Tel af naar een lancering, een deadline of een aanbieding.137 HighlighterFree Markeer zoekresultaten in tekst zodat gebruikers ze direct vinden.138 MarqueeFree Een bewegende strook voor korte mededelingen die gebruikers kunnen pauzeren.139 CodeBlockFree Toon code leesbaar, met lichte syntaxiskleuring.140 MarkdownFree Toon Markdown-tekst fraai, met veilige verwerking van links en HTML.141 QrCodeFree Maak QR-codes in je pagina, zonder afbeeldingsdienst.142 BarcodeFree Druk scanbare streepjescodes rechtstreeks vanuit je app af, zonder afbeeldingsdienst.143 PricingTableFree Plankaarten met prijzen, functies en een maand- of jaarschakelaar.144 CommentThreadFree Voeg discussies toe aan elk record, met reacties en een vak voor nieuwe opmerkingen.145 ActivityFeedFree Laat zien wie wat wanneer deed, gegroepeerd per dag, zodat teams altijd weten wat er veranderd is.

Lichte gegevens 5 besturingselementen

146 TableFree Een nette tabel voor simpele, statische gegevens.147 ListFree Lijsten met pictogrammen, twee regels tekst en acties op elke rij.148 RepeaterFree Toon een lijst met je eigen sjabloon, koptekst en bericht voor een lege lijst.149 VirtualListFree Scrol soepel door honderdduizenden items.150 PropertyGridFree Bewerk de eigenschappen van elk object in een nette gegroepeerde lijst.

Slepen 1 besturingselementen

151 SortableFree Laat gebruikers een lijst herordenen door te slepen of met knoppen.

Voorkeuren 4 besturingselementen

152 ThemeToggleFree Wissel met één klik tussen lichte en donkere thema's.153 ThemeMenuFree Laat gebruikers thema en dichtheid kiezen uit één menu.154 DensityToggleFree Laat gebruikers kiezen tussen de comfortabele en de compacte dichtheid van de hele toepassing.155 LanguageToggleFree Wissel de taal van de hele interface, Engels of Bulgaars, met één besturing.

Hulpmiddelen 5 besturingselementen

156 BreakpointObserverFree Bouw lay-outs die op schermgrootte reageren met één eenvoudig signaal.157 FullscreenFree Laat gebruikers grafieken, afbeeldingen of editors op volledig scherm vergroten.158 HotkeyFree Voeg sneltoetsen toe waar ervaren gebruikers dol op zijn.159 InfiniteScrollFree Laad meer inhoud wanneer de lezer het einde van een lijst bereikt.160 ScrollToTopFree Een knop die lezers terugbrengt naar boven.

Klaar om te bouwen met RayCraft?

Begin gratis of vertel ons over je project.

Gratis aan de slag