Ir para o conteúdo
BIBLIOTECA

Controles para aplicativos reais

Grades, gráficos, agendadores, editores e mais. Cada controle tem sua própria página em linguagem clara, fácil de ler para desenvolvedores e para assistentes de IA.

TodosFreeComplete
BotõesTexto e númerosSeleção em listaControles deslizantes e avaliaçãoCor e arquivoEditoresEscolhaData e horaFormuláriosLayoutNavegaçãoSobreposiçõesRetornoContentDados levesArrastarPreferênciasUtilitáriosDadosGráficosDiagramasAgendamentoEspaço de trabalhoOffice

Botões 9 controles

001 ButtonFree O botão sobre o qual todo o seu aplicativo é construído: três estilos, seis cores, ícones e proteção contra cliques duplos.002 IconButtonFree Um botão compacto para barras de ferramentas, com nome acessível embutido.003 ButtonGroupFree Junte ações relacionadas em um único controle organizado, pronto para seletores de visualização.004 ToggleButtonFree Um botão que permanece ligado ou desligado.005 SplitButtonFree Uma ação principal com ações relacionadas a um clique de distância.006 FloatingActionButtonFree Mantenha a ação principal sempre ao alcance.007 SpeedDialFree Um botão flutuante que abre uma lista curta de ações.008 ProgressButtonFree Um botão que mostra o próprio progresso enquanto o trabalho roda.009 CopyButtonFree Um clique para copiar, com uma confirmação clara.

Texto e números 9 controles

010 TextFieldFree A caixa de texto sobre a qual seus formulários são construídos, com mensagens de validação abaixo.011 NumericFieldFree Entrada de números que respeita limites e o formato dos seus usuários.012 PercentFieldFree Digite porcentagens com naturalidade enquanto o valor continua sendo uma fração limpa.013 MoneyFieldFree Digite valores do jeito que seus usuários escrevem, na própria cultura.014 MaskedInputFree Guie as pessoas a digitar telefones, códigos e identificadores no formato certo.015 OtpInputFree Uma caixa por caractere para códigos de verificação, com digitação e colagem suaves.016 SearchBoxFree Busca com ícone, botão de limpar e sua própria ação de busca.017 PasswordStrengthFree Mostre quão forte é uma senha e quais regras ela cumpre.018 InPlaceEditorFree Edite um valor exatamente onde ele aparece: clique, altere, salve.

Seleção em lista 10 controles

019 SelectFree Escolha um item em uma lista suspensa, para qualquer tipo de valor.020 DropDownListFree Escolha em listas de qualquer tamanho, até centenas de milhares de entradas, sem lentidão.021 MultiSelectFree Escolha vários itens em uma lista suspensa, com Selecionar tudo e Limpar.022 ListBoxFree Uma lista sempre visível, para uma escolha ou várias.023 AutocompleteFree Leve as pessoas à resposta certa mais rápido reduzindo uma lista longa enquanto digitam.024 MultiColumnComboBoxFree Pesquise em uma lista que mostra várias colunas ao mesmo tempo.025 CascaderFree Deixe os usuários escolherem em uma hierarquia, um nível por vez.026 DropDownTreeFree Escolha um nó de uma hierarquia em uma lista suspensa compacta.027 TagInputFree Adicione tags livres com Enter ou vírgula.028 MentionFree Marque colegas com @ direto em uma caixa de texto.

Controles deslizantes e avaliação 5 controles

029 SliderFree Escolha um número arrastando.030 RangeSliderFree Escolha um valor inferior e um superior com um único controle.031 RangeSelectorFree Escolha um intervalo de uma série de dados com duas alças.032 RatingFree Colete avaliações com estrelas com um único clique.033 RatingDisplayFree Mostre avaliações com meias estrelas, uma nota e a contagem de avaliações.

Cor e arquivo 5 controles

034 ColorPickerFree Deixe os usuários escolherem cores com um seletor, um código hexadecimal ou predefinições prontas.035 ColorPaletteFree Uma grade de amostras de cor rápida de percorrer e fácil de usar com o teclado.036 ColorButtonFree Um botão de cor de barra de ferramentas conhecido que sempre mostra a cor escolhida.037 FileUploadFree Arraste e solte ou escolha arquivos, com verificação de tamanho e tipo integrada.038 SignaturePadFree Colete assinaturas manuscritas com mouse, dedo ou caneta.

Editores 2 controles

039 MarkdownEditorFree Escreva Markdown com uma barra de ferramentas e pré-visualização ao vivo.040 AddressFieldFree Enderece uma mensagem em segundos: cada endereço vira um chip claro, com sugestões enquanto você digita.

Escolha 9 controles

041 CheckboxFree Um simples sim ou não que funciona com seus formulários e a validação.042 CheckboxGroupFree Deixe os usuários escolherem vários itens de uma lista, claramente rotulados.043 RadioFree Uma única opção de um grupo de opções, para quando cada escolha precisa de seu próprio rótulo ou conteúdo.044 RadioGroupFree Uma escolha clara em uma lista curta.045 SwitchFree Uma chave clara de ligar e desligar.046 ChipFree Rótulos compactos para tags e filtros, removíveis quando necessário.047 ChipSetFree Transforme chips em filtros que as pessoas selecionam um ou vários por vez.048 ToggleGroupFree Um controle segmentado para seletores de visualização e escolhas.049 TransferListFree Mova itens entre duas listas para escolher um subconjunto.

Data e hora 12 controles

050 CalendarFree Um calendário que se encaixa nas suas páginas, no idioma dos seus usuários.051 DatePickerFree Escolha uma data em um calendário, no idioma e no formato que seus usuários conhecem.052 DateTimePickerFree Escolha data e hora em um único campo.053 DateTimeRangePickerFree Selecione um período em um calendário que mostra dois meses, com intervalos rápidos.054 MonthPickerFree Escolha um mês e um ano sem escolher um dia.055 YearPickerFree Escolha um ano em uma grade clara.056 WeekPickerFree Escolha uma semana inteira com um clique.057 TimeFieldFree Uma caixa de hora no formato do idioma do usuário.058 TimePickerFree Digite uma hora no formato que seus usuários esperam.059 TimeRangePickerFree Escolha um horário de início e de fim em um único campo.060 TimeSpanPickerFree Digite uma duração em dias, horas, minutos e segundos.061 EventCalendarFree Uma visão mensal com eventos que se leem de relance.

Formulários 7 controles

062 ErrorSummaryFree Reúna todos os erros de um formulário em um só lugar claro.063 FormLayoutFree Organize rótulos e campos em uma grade responsiva com seções tituladas.064 FormStateFree Bloqueie ou congele um formulário inteiro com uma única configuração.065 LoginFormFree Um formulário de login pronto com validação amigável.066 RegisterFormFree Um formulário de cadastro pronto com validação amigável.067 CaptchaFree Uma primeira verificação leve contra bots simples, sem serviço externo.068 FormBuilderFree Crie formulários a partir de uma lista de definições de campos em vez de marcação.

Layout 15 controles

069 ContainerFree Mantenha o conteúdo com uma largura confortável em cada tela.070 StackFree Organize itens em linha ou coluna com espaçamento uniforme.071 GridFree Uma grade de 12 colunas que muda com o tamanho da tela.072 GridItemFree Uma célula da grade, com sua largura para cada tamanho de tela definida por alguns valores simples.073 SpacerFree Empurre itens para a ponta de uma linha.074 DividerFree Uma linha fina que dá ao conteúdo espaço para respirar.075 CardFree Um contêiner limpo que agrupa conteúdo relacionado com cabeçalho e rodapé.076 PanelFree Uma seção com título que pode recolher e carregar as próprias ações.077 FieldsetFree Agrupe campos relacionados sob um título claro.078 ToolbarFree Uma linha de ferramentas, pronta para o teclado.079 SplitterFree Painéis redimensionáveis que os usuários ajustam com mouse, toque ou teclado.080 AccordionFree Mantenha páginas longas organizadas: mostre uma seção por vez, ou várias se seus usuários preferirem.081 CollapseFree Mostre detalhes só quando os usuários pedirem.082 TagCloudFree Mostre palavras em tamanhos que seguem sua importância.083 TitleIndexFree Uma lista agrupada pela primeira letra com uma barra rápida de letras.

Navegação 19 controles

084 AppBarFree Uma barra superior limpa que se adapta de desktops largos a telefones pequenos.085 DrawerFree Um painel lateral para navegação ou detalhes que não atrapalha.086 NavMenuFree Navegação vertical que destaca a página atual.087 NavItemFree Um link do menu de navegação, com ícone e rótulo, destacado quando sua página está aberta.088 NavGroupFree Um grupo recolhível de links no menu de navegação, para que menus longos fiquem fáceis de percorrer.089 TabsFree Organize o conteúdo em painéis entre os quais os usuários alternam.090 StepperFree Guie os usuários por um processo, uma etapa por vez.091 WizardFree Guie os usuários por um processo com etapas que podem ser verificadas ou ignoradas.092 BreadcrumbsFree Mostre sempre onde o usuário está e ofereça um caminho de volta com um clique.093 MenuFree Um botão que abre uma lista clara de ações.094 MenuItemFree Uma entrada de um menu, com ícone opcional, pronta para o teclado e o mouse.095 ContextMenuFree Coloque as ações certas sob o botão direito do mouse.096 MenuBarFree Uma barra de menus de aplicativo clássica com atalhos e submenus.097 CommandContextMenuFree Menus de clique direito com atalhos, marcas e submenus, criados a partir de uma única lista de comandos.098 TextContextMenuFree Um conhecido menu de clique direito para campos de texto.099 ProfileMenuFree Mostre o usuário conectado com avatar, nome e menu.100 PaginationFree Percorra listas longas página por página.101 TreeViewFree Hierarquias fáceis de percorrer com teclado ou mouse.102 ScrollSpyFree Um sumário que acompanha o leitor por uma página longa.

Sobreposições 10 controles

103 DialogFree Diálogos focados que mantêm os usuários no caminho e funcionam com o teclado.104 DialogHostFree O lugar onde os diálogos aparecem.105 PopoverFree Um painel flutuante para mais detalhes, à mão.106 TooltipFree Uma dica curta ao passar o mouse ou com foco, sem script.107 OverlayFree Escureça a página para focar a atenção.108 LightboxFree Um visualizador em tela cheia para imagens, com botões de anterior e próximo, setas e Esc.109 TourFree Guie novos usuários pelo seu aplicativo, passo a passo.110 ColorDialogFree Peça uma cor ao usuário em um diálogo pronto, com uma linha de código.111 FontDialogFree Peça uma fonte ao usuário em um diálogo pronto, com uma linha de código.112 SnackbarHostFree O lugar onde as mensagens curtas aparecem.

Retorno 12 controles

113 AlertFree Diga o que importa, no tom certo: mensagens claras de sucesso, avisos e erros.114 BadgeFree Um pequeno rótulo de status que deixa o estado óbvio em listas e menus.115 BusyOverlayFree Mantenha os usuários informados enquanto algo carrega e evite cliques acidentais.116 CookieConsentFree Peça com educação a escolha de cookies e lembre a resposta.117 EmptyStateFree Transforme uma página vazia em um próximo passo útil.118 NotificationCenterFree Um sino com a contagem de notificações não lidas e um painel para vê-las.119 ProgressBarFree Mostre quanto algo já avançou.120 ProgressCircularFree Um anel que mostra o progresso de relance.121 ResultPageFree Conte aos usuários como foi: sucesso, erro, não encontrado ou sem acesso.122 SkeletonFree Marcadores que fazem o carregamento parecer mais rápido.123 SkeletonPresetFree Marcadores de carregamento prontos para cartões, listas, tabelas e perfis.124 SpinnerFree Um sinal claro de que algo está carregando.

Content 21 controles

125 TypographyFree Títulos e texto que permanecem consistentes em todo o seu aplicativo.126 IconFree Uma biblioteca consistente de ícones em um estilo limpo.127 ImageFree Imagens com texto alternativo obrigatório, legendas e carregamento adiado.128 ImageGalleryFree Uma grade de miniaturas que abre em um visualizador em tela cheia.129 AvatarFree Coloque um rosto ou iniciais ao lado de cada nome e deixe as listas mais pessoais.130 AvatarGroupFree Mostre uma equipe inteira em pouco espaço, com um simples +n para o resto.131 LinkFree Links com boa aparência que tratam endereços externos com segurança.132 StatisticFree Números grandes com rótulo e tendência, feitos para painéis.133 DescriptionsFree Mostre os detalhes de um registro em uma grade organizada que também cabe em telas pequenas.134 TimelineFree Conte a história de um registro como uma sequência vertical de eventos.135 CarouselFree Apresente destaques como slides, com controles que as pessoas podem pausar.136 CountdownFree Faça uma contagem regressiva até um lançamento, um prazo ou uma oferta.137 HighlighterFree Marque as ocorrências de busca no texto para que os usuários as encontrem na hora.138 MarqueeFree Uma faixa rolante para avisos curtos que os usuários podem pausar.139 CodeBlockFree Mostre código de forma legível, com realce de sintaxe leve.140 MarkdownFree Exiba texto Markdown com elegância, com tratamento seguro de links e HTML.141 QrCodeFree Crie códigos QR na sua página, sem serviço de imagens.142 BarcodeFree Imprima códigos de barras escaneáveis direto do seu aplicativo, sem serviço de imagens.143 PricingTableFree Cartões de planos com preços, recursos e uma chave mensal ou anual.144 CommentThreadFree Adicione discussões a qualquer registro, com respostas e uma caixa para novos comentários.145 ActivityFeedFree Mostre quem fez o quê e quando, agrupado por dia, para que as equipes saibam sempre o que mudou.

Dados leves 5 controles

146 TableFree Uma tabela organizada para dados simples e estáticos.147 ListFree Listas com ícones, duas linhas de texto e ações em cada linha.148 RepeaterFree Mostre uma lista com seu próprio modelo, cabeçalho e mensagem de lista vazia.149 VirtualListFree Role com suavidade por centenas de milhares de itens.150 PropertyGridFree Edite as propriedades de qualquer objeto em uma lista agrupada e organizada.

Arrastar 1 controles

151 SortableFree Deixe os usuários reordenarem uma lista arrastando ou com botões.

Preferências 4 controles

152 ThemeToggleFree Alterne entre temas claro e escuro com um clique.153 ThemeMenuFree Deixe os usuários escolherem tema e densidade em um único menu.154 DensityToggleFree Deixe os usuários escolherem entre a densidade confortável e a compacta de todo o aplicativo.155 LanguageToggleFree Troque o idioma de toda a interface, inglês ou búlgaro, com um só controle.

Utilitários 5 controles

156 BreakpointObserverFree Crie layouts que reagem ao tamanho da tela com um único sinal simples.157 FullscreenFree Deixe os usuários ampliarem gráficos, imagens ou editores para a tela cheia.158 HotkeyFree Adicione atalhos de teclado que os usuários avançados vão adorar.159 InfiniteScrollFree Carregue mais conteúdo quando o leitor chega ao fim de uma lista.160 ScrollToTopFree Um botão que leva os leitores de volta ao topo.

Dados 7 controles

161 DataGridComplete Uma grade para as tabelas em que seus usuários vivem: ordenar, filtrar, agrupar, editar e exportar.162 TreeListComplete Uma árvore e uma tabela em um só, com ordenação, filtro e escolha de colunas.163 PivotGridComplete Deixe os usuários resumirem uma lista em uma tabela cruzada e detalharem os números.164 QueryBuilderComplete Deixe os usuários criarem consultas com grupos aninhados de condições.165 DataFilterComplete Dê aos usuários uma forma amigável de criar filtros a partir de condições.166 FileExplorerComplete Dê aos usuários um navegador de arquivos familiar para o seu próprio armazenamento.167 FileManagerComplete Um gerenciador de arquivos completo: pastas, busca, ordenação, renomear e enviar.

Gráficos 26 controles

168 LineChartComplete Mostre tendências ao longo do tempo com várias séries e uma legenda clicável.169 AreaChartComplete Mostre totais e participações de relance com áreas empilhadas, percentuais ou sobrepostas.170 BarChartComplete Compare valores com clareza com barras verticais ou horizontais, agrupadas ou empilhadas.171 ComboChartComplete Combine barras e linhas em eixos compartilhados para contar uma só história.172 PieChartComplete Mostre as partes de um todo como gráfico de pizza ou de rosca.173 RadarChartComplete Compare várias medidas ao mesmo tempo em um único gráfico.174 ScatterChartComplete Revele relações entre dois números.175 BubbleChartComplete Adicione uma terceira dimensão a um gráfico de dispersão: bolhas maiores para valores maiores.176 HistogramComplete Veja como os valores se distribuem por faixas.177 BoxPlotComplete Mostre como um conjunto de números se distribui, não só a média.178 HeatmapChartComplete Revele padrões em uma tabela de números por meio da cor.179 CalendarHeatmapComplete Veja um ano inteiro de atividade de uma vez, mais escuro onde há mais.180 TreemapChartComplete Mostre proporções como retângulos: quanto maior o valor, maior a área.181 SunburstChartComplete Mostre uma hierarquia como anéis concêntricos.182 SankeyChartComplete Mostre como as quantidades fluem de uma etapa para a seguinte.183 FunnelChartComplete Mostre onde as pessoas desistem entre as etapas.184 WaterfallChartComplete Explique como aumentos e reduções se somam em um total.185 CandlestickChartComplete Apresente abertura, máxima, mínima e fechamento de cada período, como os operadores esperam.186 SparklineComplete Uma minúscula linha de tendência que cabe em uma frase ou célula de tabela.187 GaugeComplete Mostre um único valor em um mostrador claro, com faixas coloridas.188 LinearGaugeComplete Um medidor reto para um valor, horizontal ou vertical.189 BulletChartComplete Mostre o progresso em relação a uma meta em pouquíssimo espaço.190 MapComplete Colora regiões por valor e adicione marcadores, a partir dos seus próprios dados de mapa.191 ChartDataTableComplete Uma tabela de dados que acompanha um gráfico para quem usa leitores de tela.192 ChartLegendComplete A legenda de um gráfico, em que os usuários ocultam e mostram séries com um clique.193 ChartToolbarComplete Uma barra de ferramentas para um gráfico com exportação para PNG e SVG e outras ações.

Diagramas 1 controles

194 DiagramComplete Desenhe fluxogramas e organogramas que se organizam sozinhos.

Agendamento 4 controles

195 SchedulerComplete Visões de dia, semana, mês e linha do tempo com eventos repetidos, recursos e arrastar e soltar.196 SchedulerEventEditorComplete Um formulário pronto para criar e alterar eventos.197 RecurrenceEditorComplete Deixe os usuários configurarem eventos repetidos em linguagem clara.198 GanttComplete Planeje projetos com tarefas, subtarefas, marcos, dependências e arrastar e soltar.

Espaço de trabalho 10 controles

199 RibbonComplete A conhecida barra de comandos ribbon, com abas, grupos e abas contextuais.200 DockLayoutComplete Crie um espaço de trabalho em que os usuários encaixam, agrupam em abas, recolhem e destacam seus próprios painéis.201 WindowComplete Janelas flutuantes que os usuários podem mover, redimensionar, minimizar e maximizar.202 DashboardLayoutComplete Deixe os usuários montarem o próprio painel movendo e redimensionando blocos.203 DesktopShellComplete Dê ao seu aplicativo a cara de uma área de trabalho, com papel de parede e barra de tarefas.204 TaskbarComplete Uma barra com área de início, nome do módulo e bandeja para aplicativos estilo desktop.205 KanbanComplete Quadros com cartões que se movem entre colunas por arrastar, toque ou teclado.206 ChatComplete Adicione conversas ao seu aplicativo com uma lista de mensagens e um campo de redação prontos.207 MailViewComplete Mostre e-mails recebidos com segurança dentro do seu aplicativo.208 MessageEditorComplete Um editor leve para escrever mensagens com formatação básica.

Office 13 controles

209 PdfViewerComplete Abra, pesquise e anote arquivos PDF no navegador, com ferramentas de páginas e assinaturas.210 PdfCompareComplete Veja o que mudou entre duas versões de um PDF.211 DocumentEditorComplete Um processador de texto para o navegador que abre e salva arquivos Word, RTF e OpenDocument.212 RichTextEditorComplete Texto formatado em um campo de formulário: negrito, listas, links, imagens e tabelas.213 PresentationEditorComplete Crie e edite apresentações no navegador; abre e salva arquivos PowerPoint e OpenDocument.214 SpreadsheetComplete Uma planilha completa no navegador com fórmulas, gráficos e arquivos Excel.215 ProofingPanelComplete Verificações de ortografia, gramática e lógica em um só painel.216 DataGridSpreadsheetButtonComplete Deixe os usuários levarem os dados de uma grade para um arquivo de planilha com um clique.217 DataGridPdfButtonComplete Um botão que transforma as linhas de uma grade de dados em um documento PDF.218 SchedulerPdfButtonComplete Um botão que imprime o agendador em PDF: grade mensal, colunas de semana ou uma lista por dia.219 ReportButtonComplete Um botão que cria um relatório em PDF a partir dos seus dados com agrupamento, totais, gráficos e layout de página.220 SlideViewComplete Mostra um único slide de uma apresentação, para pré-visualizações e listas de slides.221 PasswordPromptComplete Um diálogo pronto que pede a senha de um documento quando um arquivo está protegido.

Pronto para construir com o RayCraft?

Comece grátis ou conte sobre o seu projeto.

Começar grátis