Hoppa till innehållet
BIBLIOTEK

Kontroller för riktiga applikationer

Rutnät, diagram, planerare, redigerare och mer. Varje kontroll har en egen sida på vanligt språk, lätt att läsa för utvecklare och för AI-assistenter.

AllaFreeComplete
KnapparText och siffrorVal från listaReglage och betygFärg och filRedigerareValDatum och tidFormulärLayoutNavigeringÖverläggÅterkopplingContentLätta dataDraInställningarVerktyg

Knappar 9 kontroller

001 ButtonFree Knappen som hela din app bygger på: tre stilar, sex färger, ikoner och skydd mot dubbelklick.002 IconButtonFree En kompakt knapp för verktygsfält, med inbyggt tillgängligt namn.003 ButtonGroupFree Foga samman relaterade åtgärder till en prydlig kontroll, redo för vyväljare.004 ToggleButtonFree En knapp som förblir på eller av.005 SplitButtonFree En huvudåtgärd med relaterade åtgärder ett klick bort.006 FloatingActionButtonFree Håll huvudåtgärden alltid inom räckhåll.007 SpeedDialFree En flytande knapp som öppnar en kort lista med åtgärder.008 ProgressButtonFree En knapp som visar sitt eget förlopp medan arbete pågår.009 CopyButtonFree Ett klick för att kopiera, med tydlig bekräftelse.

Text och siffror 9 kontroller

010 TextFieldFree Textrutan som dina formulär bygger på, med valideringsmeddelanden under.011 NumericFieldFree Talinmatning som respekterar gränser och dina användares format.012 PercentFieldFree Skriv procent naturligt medan värdet förblir ett rent bråktal.013 MoneyFieldFree Skriv belopp som dina användare skriver dem, i sin egen kultur.014 MaskedInputFree Led folk att skriva telefonnummer, koder och id i rätt format.015 OtpInputFree En ruta per tecken för verifieringskoder, med smidig inmatning och inklistring.016 SearchBoxFree Sökning med ikon, rensningsknapp och din egen sökåtgärd.017 PasswordStrengthFree Visa hur starkt ett lösenord är och vilka regler det uppfyller.018 InPlaceEditorFree Redigera ett värde precis där det visas: klicka, ändra, spara.

Val från lista 10 kontroller

019 SelectFree Välj ett objekt från en rullgardin, för vilken värdetyp som helst.020 DropDownListFree Välj från listor av vilken längd som helst, även hundratusentals poster, utan fördröjning.021 MultiSelectFree Välj flera objekt från en rullgardin, med Markera alla och Rensa.022 ListBoxFree En alltid synlig lista, för ett val eller flera.023 AutocompleteFree Få folk snabbare till rätt svar genom att begränsa en lång lista medan de skriver.024 MultiColumnComboBoxFree Sök i en lista som visar flera kolumner samtidigt.025 CascaderFree Låt användare välja i en hierarki, en nivå i taget.026 DropDownTreeFree Välj en nod i en hierarki från en kompakt rullgardin.027 TagInputFree Lägg till fria taggar med Enter eller komma.028 MentionFree Tagga kollegor med @ direkt i en textruta.

Reglage och betyg 5 kontroller

029 SliderFree Välj ett tal genom att dra.030 RangeSliderFree Välj ett nedre och ett övre värde med en kontroll.031 RangeSelectorFree Välj ett intervall i en dataserie med två handtag.032 RatingFree Samla stjärnbetyg med ett enda klick.033 RatingDisplayFree Visa betyg med halva stjärnor, en poäng och antal omdömen.

Färg och fil 5 kontroller

034 ColorPickerFree Låt användare välja färger med en väljare, en hexkod eller färdiga förval.035 ColorPaletteFree Ett rutnät av färgprover som är snabbt att överblicka och lätt att använda med tangentbordet.036 ColorButtonFree En välbekant färgknapp för verktygsfältet som alltid visar den valda färgen.037 FileUploadFree Dra och släpp eller välj filer, med inbyggd kontroll av storlek och typ.038 SignaturePadFree Samla handskrivna signaturer med mus, finger eller penna.

Redigerare 2 kontroller

039 MarkdownEditorFree Skriv Markdown med ett verktygsfält och live-förhandsvisning.040 AddressFieldFree Adressera ett meddelande på sekunder: varje adress blir en tydlig chip, med förslag medan du skriver.

Val 9 kontroller

041 CheckboxFree Ett enkelt ja eller nej som fungerar med dina formulär och validering.042 CheckboxGroupFree Låt användare välja flera objekt från en lista, tydligt märkta.043 RadioFree Ett enskilt alternativ i en radiogrupp, för när varje val behöver sin egen etikett eller sitt eget innehåll.044 RadioGroupFree Ett tydligt val från en kort lista.045 SwitchFree En tydlig av- och på-brytare.046 ChipFree Kompakta etiketter för taggar och filter, som kan tas bort vid behov.047 ChipSetFree Gör chips till filter som folk kan välja ett i taget eller flera.048 ToggleGroupFree En segmenterad kontroll för vyväljare och val.049 TransferListFree Flytta objekt mellan två listor för att välja en delmängd.

Datum och tid 12 kontroller

050 CalendarFree En kalender som passar in på dina sidor, på dina användares språk.051 DatePickerFree Välj ett datum från en kalender, på det språk och i det format som dina användare känner till.052 DateTimePickerFree Välj datum och tid i ett fält.053 DateTimeRangePickerFree Välj en period på en kalender med två månader, med snabbval.054 MonthPickerFree Välj en månad och ett år utan att välja en dag.055 YearPickerFree Välj ett år från ett tydligt rutnät.056 WeekPickerFree Välj en hel vecka med ett klick.057 TimeFieldFree Ett tidsfält i formatet för användarens språk.058 TimePickerFree Ange en tid i det format dina användare förväntar sig.059 TimeRangePickerFree Välj en start- och sluttid i ett fält.060 TimeSpanPickerFree Ange en varaktighet i dagar, timmar, minuter och sekunder.061 EventCalendarFree En månadsvy med händelser som går att läsa med en blick.

Formulär 7 kontroller

062 ErrorSummaryFree Samla alla formulärfel på ett tydligt ställe.063 FormLayoutFree Ordna etiketter och fält i ett responsivt rutnät med sektioner med rubrik.064 FormStateFree Lås eller frys ett helt formulär med en enda inställning.065 LoginFormFree Ett färdigt inloggningsformulär med vänlig validering.066 RegisterFormFree Ett färdigt registreringsformulär med vänlig validering.067 CaptchaFree En lätt första kontroll mot enkla botar, utan extern tjänst.068 FormBuilderFree Bygg formulär från en lista med fältdefinitioner i stället för markup.

Layout 15 kontroller

069 ContainerFree Håll innehållet på en bekväm bredd på varje skärm.070 StackFree Ordna objekt i en rad eller kolumn med jämnt avstånd.071 GridFree Ett rutnät med 12 kolumner som ändras med skärmstorleken.072 GridItemFree En cell i rutnätet, med sin bredd för varje skärmstorlek angiven med några enkla värden.073 SpacerFree Skjut objekt till slutet av en rad.074 DividerFree En tunn linje som ger innehållet andrum.075 CardFree En ren behållare som grupperar relaterat innehåll med sidhuvud och sidfot.076 PanelFree En sektion med rubrik som kan fällas ihop och bära egna åtgärder.077 FieldsetFree Gruppera relaterade fält under en tydlig rubrik.078 ToolbarFree En rad med verktyg, redo för tangentbordet.079 SplitterFree Storleksändringsbara fönsterrutor som användare justerar med mus, beröring eller tangentbord.080 AccordionFree Håll långa sidor överskådliga: visa en sektion i taget, eller flera om dina användare föredrar det.081 CollapseFree Visa detaljer bara när användarna ber om dem.082 TagCloudFree Visa ord i storlekar som följer deras vikt.083 TitleIndexFree En lista grupperad efter första bokstav med ett snabbt bokstavsfält.

Navigering 19 kontroller

084 AppBarFree Ett rent övre fält som anpassar sig från breda skrivbord till små telefoner.085 DrawerFree En sidopanel för navigering eller detaljer som inte är i vägen.086 NavMenuFree Lodrät navigering som markerar den aktuella sidan.087 NavItemFree En länk i navigeringsmenyn, med ikon och etikett, markerad när dess sida är öppen.088 NavGroupFree En hopfällbar grupp av länkar i navigeringsmenyn, så att långa menyer förblir lätta att överblicka.089 TabsFree Organisera innehåll i paneler som användare växlar mellan.090 StepperFree Led användare genom en process ett steg i taget.091 WizardFree Led användare genom en process med steg som kan kontrolleras eller hoppas över.092 BreadcrumbsFree Visa alltid var användaren är och ge en väg tillbaka med ett klick.093 MenuFree En knapp som öppnar en tydlig lista med åtgärder.094 MenuItemFree En post i en meny, med valfri ikon, redo för tangentbord och mus.095 ContextMenuFree Lägg de rätta åtgärderna under höger musknapp.096 MenuBarFree Ett klassiskt menyfält för applikationer med genvägar och undermenyer.097 CommandContextMenuFree Högerklicksmenyer med genvägar, bockar och undermenyer, byggda från en enda kommandolista.098 TextContextMenuFree En välbekant högerklicksmeny för textfält.099 ProfileMenuFree Visa den inloggade användaren med avatar, namn och meny.100 PaginationFree Bläddra genom långa listor sida för sida.101 TreeViewFree Hierarkier som är lätta att bläddra i med tangentbord eller mus.102 ScrollSpyFree En innehållsförteckning som följer läsaren genom en lång sida.

Överlägg 10 kontroller

103 DialogFree Fokuserade dialoger som håller användarna på rätt spår och fungerar med tangentbordet.104 DialogHostFree Platsen där dialoger visas.105 PopoverFree En flytande panel för extra detaljer, nära till hands.106 TooltipFree Ett kort tips vid hovring eller fokus, utan skript.107 OverlayFree Dämpa sidan för att rikta uppmärksamheten.108 LightboxFree En helskärmsvisare för bilder, med föregående- och nästa-knappar, piltangenter och Escape.109 TourFree Led nya användare genom din app steg för steg.110 ColorDialogFree Be användaren om en färg i en färdig dialog, med en rad kod.111 FontDialogFree Be användaren om ett typsnitt i en färdig dialog, med en rad kod.112 SnackbarHostFree Platsen där korta meddelanden visas.

Återkoppling 12 kontroller

113 AlertFree Säg det som är viktigt i rätt ton: tydliga meddelanden om framgång, varningar och fel.114 BadgeFree En liten statusetikett som gör tillståndet tydligt i listor och menyer.115 BusyOverlayFree Håll användare informerade medan något laddas och stoppa oavsiktliga klick.116 CookieConsentFree Fråga artigt om cookieval och kom ihåg svaret.117 EmptyStateFree Gör en tom sida till ett användbart nästa steg.118 NotificationCenterFree En klocka med antal olästa aviseringar och en panel för att se dem.119 ProgressBarFree Visa hur långt något har kommit.120 ProgressCircularFree En ring som visar förloppet med en blick.121 ResultPageFree Berätta för användare hur det gick: lyckades, fel, hittades inte eller ingen åtkomst.122 SkeletonFree Platshållare som gör att laddning känns snabbare.123 SkeletonPresetFree Färdiga laddningsplatshållare för kort, listor, tabeller och profiler.124 SpinnerFree Ett tydligt tecken på att något laddas.

Content 21 kontroller

125 TypographyFree Rubriker och text som förblir konsekventa i hela din app.126 IconFree Ett konsekvent bibliotek av ikoner i en ren stil.127 ImageFree Bilder med obligatorisk alternativtext, bildtexter och fördröjd laddning.128 ImageGalleryFree Ett rutnät av miniatyrer som öppnas i en helskärmsvisare.129 AvatarFree Sätt ett ansikte eller initialer bredvid varje namn och gör listor mer personliga.130 AvatarGroupFree Visa ett helt team på liten yta, med ett enkelt +n för resten.131 LinkFree Länkar som ser rätt ut och hanterar externa adresser säkert.132 StatisticFree Stora tal med etikett och trend, gjorda för instrumentpaneler.133 DescriptionsFree Visa detaljerna för en post i ett prydligt rutnät som också passar små skärmar.134 TimelineFree Berätta historien om en post som en lodrät följd av händelser.135 CarouselFree Presentera höjdpunkter som bildspel, med kontroller som folk kan pausa.136 CountdownFree Räkna ner till en lansering, en deadline eller ett erbjudande.137 HighlighterFree Markera sökträffar i text så att användare hittar dem direkt.138 MarqueeFree En rullande remsa för korta meddelanden som användare kan pausa.139 CodeBlockFree Visa kod läsbart, med lätt syntaxfärgning.140 MarkdownFree Visa Markdown-text snyggt, med säker hantering av länkar och HTML.141 QrCodeFree Skapa QR-koder på din sida, utan bildtjänst.142 BarcodeFree Skriv ut skanningsbara streckkoder direkt från din app, utan bildtjänst.143 PricingTableFree Plankort med priser, funktioner och en månads- eller årsväxlare.144 CommentThreadFree Lägg till diskussioner på vilken post som helst, med svar och en ruta för nya kommentarer.145 ActivityFeedFree Visa vem som gjorde vad och när, grupperat per dag, så att team alltid vet vad som ändrats.

Lätta data 5 kontroller

146 TableFree En prydlig tabell för enkla, statiska data.147 ListFree Listor med ikoner, två rader text och åtgärder på varje rad.148 RepeaterFree Visa en lista med din egen mall, rubrik och meddelande för tom lista.149 VirtualListFree Rulla smidigt genom hundratusentals objekt.150 PropertyGridFree Redigera egenskaperna hos vilket objekt som helst i en prydlig grupperad lista.

Dra 1 kontroller

151 SortableFree Låt användare ordna om en lista genom att dra eller med knappar.

Inställningar 4 kontroller

152 ThemeToggleFree Växla mellan ljusa och mörka teman med ett klick.153 ThemeMenuFree Låt användare välja tema och täthet från en meny.154 DensityToggleFree Låt användare välja mellan bekväm och kompakt täthet för hela applikationen.155 LanguageToggleFree Växla språket i hela gränssnittet, engelska eller bulgariska, med en kontroll.

Verktyg 5 kontroller

156 BreakpointObserverFree Bygg layouter som reagerar på skärmstorleken med en enda enkel signal.157 FullscreenFree Låt användare förstora diagram, bilder eller redigerare till helskärm.158 HotkeyFree Lägg till kortkommandon som avancerade användare kommer att älska.159 InfiniteScrollFree Ladda mer innehåll när läsaren når slutet av en lista.160 ScrollToTopFree En knapp som tar läsarna tillbaka till toppen.

Redo att bygga med RayCraft?

Börja gratis, eller berätta om ditt projekt.

Kom igång gratis