Introdução
O RayCraft é uma biblioteca de controles Blazor (.NET 10: Server, WebAssembly e Auto) com temas claro, escuro e compacto, textos em inglês e búlgaro e suporte a teclado e leitores de tela. O RayCraft Free está disponível agora; o RayCraft Complete está disponível agora.
Instalação
Adicione o pacote com:
dotnet add package RayCraft.BlazorVeja Começar para os passos de configuração. Há exemplos funcionais no repositório do GitHub, que contém apenas código de exemplo e demonstração, não o código da biblioteca.
Controles
Botões
Button (Free)
Dispara uma ação, ou navega quando Href é definido (o botão passa a ser renderizado como um link com a mesma aparência).
IconButton (Free)
Botão que mostra só um ícone. Label é obrigatório: vira o nome acessível e a dica.
ButtonGroup (Free)
Junta botões em um controle segmentado, na horizontal ou na vertical. Combine com ToggleButton para um seletor de visualização.
ToggleButton (Free)
Botão que mantém um estado ligado/desligado e o expõe com aria-pressed.
SplitButton (Free)
Uma ação principal com um menu de ações relacionadas. São usados os mesmos elementos MenuItem de Menu.
FloatingActionButton (Free)
Um botão quadrado fixo em um canto da tela para a ação principal. Extended mostra o texto ao lado do ícone; o texto é sempre o nome acessível.
SpeedDial (Free)
Um botão flutuante que abre uma lista curta de ações. Esc fecha a lista; cada ação é um botão real na ordem do Tab.
ProgressButton (Free)
Um botão que mostra trabalho em andamento: um indicador enquanto Progress não está definido, uma barra ao longo da borda inferior e uma porcentagem falada quando está.
CopyButton (Free)
Copia um texto para a área de transferência e confirma com uma marca. Precisa de um contexto seguro (https ou localhost).
Texto e números
TextField (Free)
Entrada de texto de uma linha. Funciona com EditForm e DataAnnotations; a mensagem de erro aparece abaixo do campo.
NumericField (Free)
Entrada de número para qualquer tipo numérico (int, decimal, double, versões anuláveis). Valores fora de Min e Max são limitados, e os botões avançam por Step.
PercentField (Free)
Campo numérico que o usuário digita como porcentagem (12.5) enquanto o valor é guardado como fração (0.125).
MoneyField (Free)
Campo de valor para decimal e decimal?. O texto é formatado e interpretado com a cultura atual (tanto 1,234.50 quanto 1.234,50 são entendidos), arredondado para Decimals e mantido dentro de Min e Max.
MaskedInput (Free)
Campo de texto que formata o que você digita por uma máscara: 0 é um dígito, a é uma letra, * é uma letra ou dígito, qualquer outro caractere é um separador fixo (escape um caractere de máscara com uma barra invertida).
OtpInput (Free)
Uma caixa por caractere para códigos de verificação. Digitar passa para a próxima caixa, Backspace para a anterior, e um código colado preenche todas as caixas.
SearchBox (Free)
Campo de busca com ícone e botão de limpar. OnSearch roda no Enter, no botão de limpar e (opcionalmente) a cada tecla; Esc limpa o texto.
PasswordStrength (Free)
Mostra quão forte é uma senha com quatro barras, uma palavra e uma lista das regras que ela cumpre.
InPlaceEditor (Free)
Mostra um valor como texto; um clique o transforma em um campo com botões de salvar e cancelar.
Seleção em lista
Select (Free)
Lista suspensa para escolher um item. TValue pode ser de qualquer tipo, inclusive seus próprios registros.
DropDownList (Free)
Um combobox para listas muito longas. Só as opções visíveis são desenhadas, então 100.000 entradas abrem na hora; digitar reduz a lista.
MultiSelect (Free)
Lista suspensa com caixas de seleção para escolher vários itens. O botão resume a seleção; Selecionar tudo e Limpar são embutidos.
ListBox (Free)
Lista sempre visível para uma escolha (botões de opção por baixo) ou várias (caixas de seleção).
Autocomplete (Free)
Campo de texto que filtra uma lista enquanto você digita. Aceita as setas, Enter e Esc e segue o padrão ARIA combobox.
MultiColumnComboBox (Free)
Um Autocomplete cuja lista mostra várias colunas com uma linha de cabeçalho. Digitar pesquisa em todas as colunas.
Cascader (Free)
Escolha um valor de uma hierarquia: uma coluna de opções abre uma coluna de subopções.
DropDownTree (Free)
Um campo suspenso que abre uma árvore para escolher um nó. É construído com TreeView e Popover e mantém o comportamento de teclado deles.
TagInput (Free)
Lista livre de tags. Enter ou vírgula adiciona o texto digitado, Backspace em um campo vazio remove a última tag, e cada tag tem um botão de remover.
Mention (Free)
Uma caixa de texto que sugere nomes depois de um caractere gatilho (@ por padrão). As setas e Enter escolhem; o nome escolhido é inserido com o gatilho.
Controles deslizantes e avaliação
Slider (Free)
Arraste para escolher um número em um intervalo.
RangeSlider (Free)
Controle deslizante com duas alças para escolher um valor inferior e um superior. Ambas as alças são entradas range nativas, então as setas funcionam.
RangeSelector (Free)
Uma faixa com duas alças que seleciona um intervalo de uma série; uma pequena pré-visualização dos dados fica atrás das alças.
Rating (Free)
Avaliação por estrelas. Clique de novo na estrela atual para limpá-la.
RatingDisplay (Free)
Estrelas somente leitura com frações (4.5 mostra quatro e meia), um número opcional e a contagem de avaliações.
Cor e arquivo
ColorPicker (Free)
Campo de cor com o seletor nativo, uma caixa de texto hexadecimal e amostras predefinidas opcionais.
ColorPalette (Free)
Uma grade de amostras de cor que funciona como grupo de opções: uma única parada de Tab, as setas, Home e End movem e escolhem.
ColorButton (Free)
Um botão de barra de ferramentas para uma cor: um ícone com uma barra da cor escolhida embaixo. Ao clicar, abre o seletor de cor do navegador.
FileUpload (Free)
Área de soltar e seletor de arquivos. Verifica tamanho, tipo e quantidade, lista os arquivos aceitos e dispara FilesChanged; ler o conteúdo fica por sua conta (IBrowserFile.OpenReadStream).
SignaturePad (Free)
Tela para desenhar uma assinatura com mouse, dedo ou caneta. O valor é um PNG como URL de dados.
Editores
MarkdownEditor (Free)
Área de texto com barra de formatação e pré-visualização ao vivo, para quem escreve Markdown em vez de texto formatado.
AddressField (Free)
Um campo de destinatários de e-mail: cada endereço vira um chip. Digite ou cole uma lista, escolha entre sugestões vindas da sua fonte de dados, dê dois cliques em um chip para editá-lo e veja na hora quais endereços não são válidos.
Escolha
Checkbox (Free)
Entrada booleana com rótulo.
CheckboxGroup (Free)
Um grupo de caixas de seleção para escolher vários itens de uma lista, dentro de um fieldset com legenda para que os leitores de tela anunciem o nome do grupo.
Radio (Free)
RadioGroup (Free)
Uma escolha em uma lista curta. Use Items para listas simples ou filhos Radio para rótulos personalizados.
Switch (Free)
Chave booleana, anunciada às tecnologias assistivas como switch.
Chip (Free)
Rótulo compacto, opcionalmente removível.
ChipSet (Free)
Chips que podem ser selecionados, para filtros e tags. Uma escolha por padrão, várias com Multiple.
ToggleGroup (Free)
Controle segmentado para uma escolha (grupo de opções) ou várias (botões de alternar). Use em seletores de visualização e alternadores de formatação.
TransferList (Free)
Duas listas com botões para mover itens entre elas, para escolher um subconjunto de uma lista longa.
Data e hora
Calendar (Free)
Grade mensal usada por DatePicker e DateTimeRangePicker. Use sozinha para seleção de data em linha.
DatePicker (Free)
Campo de data com calendário. Os nomes dos meses e dos dias, o primeiro dia da semana e o formato da data (também usado como texto de exemplo padrão) seguem o idioma atual do RayCraft.
DateTimePicker (Free)
Um campo para data e hora: um DatePicker e um TimePicker lado a lado que juntos vinculam um DateTime.
DateTimeRangePicker (Free)
Período com início e fim, escolhido em um calendário que mostra dois meses lado a lado (Months) (o primeiro clique define o início, o segundo o fim) e digitado ou ajustado por campo.
MonthPicker (Free)
Escolhe um mês e um ano. O valor é o primeiro dia do mês.
YearPicker (Free)
Escolhe um ano em uma grade de doze anos com botões para páginas anteriores e posteriores.
WeekPicker (Free)
Escolhe uma semana inteira. O valor é o primeiro dia da semana do idioma atual; o campo mostra o número da semana ISO e as datas.
TimeField (Free)
A caixa de hora simples sobre a qual TimePicker, TimeRangePicker e DateTimeRangePicker são construídos.
TimePicker (Free)
Campo de hora escrito no formato do idioma atual do RayCraft (9:30 AM em inglês, 9:30 em búlgaro), então fica igual em todos os navegadores.
TimeRangePicker (Free)
Hora de início e de fim em um campo, cada uma escrita no formato do idioma atual como em TimePicker.
TimeSpanPicker (Free)
Digita uma duração como dias, horas, minutos e segundos. O valor é um TimeSpan.
EventCalendar (Free)
Visão mensal com eventos. Eventos que duram vários dias aparecem em cada dia; um dia mostra até MaxEventsPerDay e um link +n mais.
Formulários
ErrorSummary (Free)
Lista todas as mensagens de validação do EditForm ao redor em um só bloco. Coloque-o dentro de um EditForm com um validador.
FormLayout (Free)
Organiza rótulos e campos em uma grade responsiva de doze colunas, com seções tituladas.
FormState (Free)
Bloqueia todos os campos do RayCraft dentro dele com um parâmetro: Disabled os bloqueia por completo, ReadOnly mostra os valores sem permitir alterações.
LoginForm (Free)
Formulário de login pronto com validação localizada. Dispara OnSubmit com o LoginModel digitado e deixa o login em si por sua conta.
RegisterForm (Free)
Formulário de cadastro pronto: nome, e-mail, senha e confirmação, com validação localizada.
Captcha (Free)
Verificação humana simples com uma pequena pergunta de aritmética. Só barra bots básicos; verifique a proteção real no servidor (por exemplo, com um serviço feito para isso).
FormBuilder (Free)
Cria um formulário a partir de definições de campos: texto, e-mail, senha, número, data, área de texto, lista, opção, caixa de seleção e chave.
Layout
Container (Free)
Centraliza o conteúdo e limita sua largura. A largura padrão segue os pontos de quebra (540, 720, 960, 1140 e 1320 px).
Stack (Free)
Organiza os filhos em linha ou coluna com um espaçamento consistente.
Grid (Free)
Grade de 12 colunas. Span define a largura de um item em cada tela, e Sm, Md, Lg, Xl e Xxl a mudam a partir desse ponto de quebra (os mesmos da página Breakpoints).
GridItem (Free)
Spacer (Free)
Elemento vazio que cresce para preencher o espaço livre em uma linha flex, empurrando os itens seguintes para o fim.
Divider (Free)
Linha fina que separa o conteúdo, horizontal ou vertical.
Card (Free)
Contêiner com cabeçalho e rodapé opcionais.
Panel (Free)
Seção com título e botão de recolher opcional e ações no cabeçalho.
Fieldset (Free)
Agrupa controles de formulário relacionados sob uma legenda. Disabled desliga todos os controles dentro dele.
Toolbar (Free)
Linha de botões de ferramentas com role=toolbar.
Splitter (Free)
Dois painéis redimensionáveis. Arraste a barra com o mouse ou o toque, ou dê foco a ela e use as setas (Shift para passos maiores, Home e End para os limites).
Accordion (Free)
Seções expansíveis. Por padrão, abrir uma fecha as outras; defina Multiple para permitir várias.
Collapse (Free)
Mostra ou oculta seu conteúdo. Vincule Expanded a qualquer botão; KeepMounted mantém o conteúdo na página enquanto está oculto.
TagCloud (Free)
Palavras em tamanhos que seguem seu peso. Tags podem ser links, botões que selecionam ou texto simples.
TitleIndex (Free)
Uma lista agrupada pela primeira letra com uma barra de letras no topo. Uma letra move o foco (e a visão) para a sua seção; letras sem itens ficam desativadas.
Navegação
AppBar (Free)
Barra superior para o título e as ações principais. Coloque links em NavContent e eles ficam na barra em telas largas e se recolhem atrás de um botão de menu abaixo de 768 px.
Drawer (Free)
Painel lateral. Os painéis temporários flutuam sobre a página com um fundo, fecham com Esc e movem o foco para o painel; defina Temporary=false para uma barra lateral permanente.
NavMenu (Free)
Navegação vertical com destaque da página ativa (baseada em NavLink) e grupos recolhíveis.
NavItem (Free)
NavGroup (Free)
Tabs (Free)
Alterna entre painéis. Aceita as setas, Home e End.
Stepper (Free)
Guia o usuário por uma sequência de etapas com botões Voltar e Avançar.
Wizard (Free)
Um fluxo guiado em etapas. Cada etapa pode validar antes de o usuário seguir, uma etapa pode ser opcional, etapas concluídas podem ser reabertas e o resultado pode mostrar uma página própria.
Breadcrumbs (Free)
Mostra o caminho até a página atual. O último item é a página atual.
Menu (Free)
Botão que abre uma lista de ações. Fecha ao selecionar, com Esc ou com um clique fora.
MenuItem (Free)
ContextMenu (Free)
Menu aberto com o botão direito do mouse ou a tecla de menu de contexto sobre seu conteúdo.
MenuBar (Free)
Uma barra de menus horizontal para aplicativos: menus de nível superior com comandos, atalhos, marcas, ícones e submenus.
CommandContextMenu (Free)
Um menu de contexto criado a partir de dados MenuCommand, com submenus, marcas, atalhos e o mesmo tratamento de teclado de MenuBar.
TextContextMenu (Free)
O menu de clique direito de um elemento de texto editável: desfazer, refazer, recortar, copiar, colar e selecionar tudo, mais os comandos que você adicionar.
ProfileMenu (Free)
Avatar, nome e um menu para o usuário conectado, criados com os mesmos elementos MenuItem de Menu.
Pagination (Free)
Seletor de página com reticências para intervalos longos.
TreeView (Free)
Lista hierárquica que segue o padrão ARIA tree. As setas movem e expandem, Home e End saltam, Enter ou Espaço seleciona.
ScrollSpy (Free)
Um sumário na página que destaca o título que está no momento no topo da tela.
Sobreposições
Dialog (Free)
Janela modal. O foco entra e fica lá dentro até ela fechar (Esc, o botão de fechar ou um clique no fundo); depois o foco volta ao elemento anterior.
DialogHost (Free)
Popover (Free)
Painel flutuante aberto por um ativador. Fecha com Esc ou com um clique fora.
Tooltip (Free)
Dica curta mostrada ao passar o mouse e no foco do teclado. É CSS puro, então funciona também antes de a página ficar interativa.
Overlay (Free)
Escurece a página (ou, com Absolute, seu elemento pai posicionado) e pode mostrar conteúdo como um indicador de carregamento.
Lightbox (Free)
Tour (Free)
Introdução passo a passo que destaca elementos da página escolhidos por seletor CSS. Passos sem elemento correspondente aparecem no centro.
ColorDialog (Free)
FontDialog (Free)
SnackbarHost (Free)
Retorno
Alert (Free)
Mensagem em linha colorida por gravidade, com um ícone correspondente. Defina Dismissible para mostrar um botão de fechar; use bind-Visible ou OnDismiss para reagir ao fechamento.
Badge (Free)
Pequeno rótulo de status.
BusyOverlay (Free)
Envolve uma região e, enquanto Busy é true, a escurece e mostra um indicador de carregamento por cima. A cobertura bloqueia o mouse, marca a região com aria-busy e anuncia o rótulo.
CookieConsent (Free)
Um banner que pergunta quais cookies são permitidos. Lembra a resposta no armazenamento local, oferece Aceitar tudo, Somente necessários e uma escolha por categoria, e não bloqueia a página.
EmptyState (Free)
Mensagem para listas e páginas sem conteúdo, com ícone, explicação e ações opcionais.
NotificationCenter (Free)
Um botão de sino com a contagem de notificações não lidas e um painel que as lista. Dá para ler, dispensar e limpar; a contagem é anunciada aos leitores de tela.
ProgressBar (Free)
Mostra o progresso de 0 a Max. Sem Value, é indeterminada.
ProgressCircular (Free)
Anel que mostra um valor de progresso determinado. Para durações desconhecidas, use Spinner.
ResultPage (Free)
Uma mensagem em página inteira para um resultado: sucesso, erro, informação, aviso, página não encontrada, sem acesso e erro do servidor, com ícone, título, texto e botões.
Skeleton (Free)
Marcador mostrado enquanto o conteúdo carrega.
SkeletonPreset (Free)
Marcadores de carregamento prontos: cartão, lista, tabela, perfil e parágrafo. Anunciam um estado ocupado aos leitores de tela.
Spinner (Free)
Indicador de carregamento indeterminado com um nome acessível localizado.
Content
Typography (Free)
Títulos, texto corrido, legendas e sobrelinhas com a fonte e os tamanhos do tema. Os títulos renderizam elementos h1 a h6 de verdade.
Icon (Free)
Uma biblioteca de ícones comuns em um estilo consistente: grade de 16 px, traços de 1,5 px, pontas quadradas.
Image (Free)
Imagem com texto alternativo obrigatório, modos de ajuste, borda e legenda opcionais. O carregamento adiado vem ativado por padrão.
ImageGallery (Free)
Grade de miniaturas que abre um visualizador em tela cheia (Lightbox) com botões de anterior e próximo, as setas e Esc.
Avatar (Free)
Selo quadrado de usuário: imagem, iniciais calculadas a partir de um nome ou um ícone de usuário padrão.
AvatarGroup (Free)
Avatares sobrepostos para uma equipe ou as pessoas de um item. Mais de Max pessoas se recolhem em um avatar +n cuja dica lista os nomes.
Link (Free)
Âncora estilizada. Links externos abrem em nova aba com rel="noopener noreferrer" e mostram um ícone.
Statistic (Free)
Número grande com um rótulo, uma tendência opcional e conteúdo extra como um Sparkline.
Descriptions (Free)
Pares de chave e valor em uma grade, para os detalhes de um registro. As colunas se reduzem a uma em telas estreitas.
Timeline (Free)
Sequência vertical de eventos com marcador, hora e cor de gravidade opcional.
Carousel (Free)
Slides com botões de anterior e próximo e indicadores. A reprodução automática é opcional; pausa ao passar o mouse e com foco e tem um botão de pausa, como exige a WCAG.
Countdown (Free)
Faz a contagem regressiva até um momento e dispara OnFinished quando ele chega.
Highlighter (Free)
Marca todas as ocorrências de um texto de busca dentro de uma string, ignorando maiúsculas a menos que CaseSensitive seja definido.
Marquee (Free)
Faixa rolante para avisos curtos. Pausa ao passar o mouse e com foco, tem um botão de pausa (WCAG 2.2.2) e para completamente quando o sistema pede movimento reduzido.
CodeBlock (Free)
Mostra código-fonte com realce de sintaxe leve (C#, JavaScript, TypeScript, JSON, HTML, SCSS, SQL e shell), números de linha opcionais e botão de copiar.
Markdown (Free)
Mostra texto Markdown: títulos, ênfase, links, imagens, listas (aninhadas), citações, código, tabelas e linhas.
QrCode (Free)
Desenha um código QR como SVG simples, sem serviço de imagens nem script. Texto de até 2331 bytes (todas as 40 versões, nível de correção de erro M).
Barcode (Free)
Desenha Code 128 (todo o ASCII imprimível, os dígitos são empacotados em pares), Code 39 (maiúsculas, dígitos e - . $ / + % espaço), EAN-13, EAN-8 e UPC-A (o dígito verificador é adicionado, ou verificado quando informado) como SVG simples.
PricingTable (Free)
Cartões de planos com preço, lista de recursos e botão, com uma chave opcional entre cobrança mensal e anual.
CommentThread (Free)
Comentários com respostas, uma caixa para novo comentário e os comandos Responder e Excluir. O texto é mostrado como digitado (quebras de linha mantidas, nada é tratado como HTML).
ActivityFeed (Free)
Uma lista do que aconteceu e de quem fez, do mais recente ao mais antigo, agrupada por dia, com um ícone ou as iniciais do autor e uma linha de detalhe opcional.
Dados leves
Table (Free)
Tabela HTML simples e estilizada para dados estáticos. Use DataGrid quando precisar ordenar, filtrar ou paginar.
List (Free)
Lista vertical de itens com ícone, duas linhas de texto e uma ação no fim. Os itens viram links ou botões quando Href ou OnClick é definido.
Repeater (Free)
Mostra uma lista de itens com seu próprio modelo. Acrescenta o que um laço simples não tem: um cabeçalho, um estado vazio, uma grade com número fixo de colunas e paginação opcional (PageSize).
VirtualList (Free)
Uma lista rolável que desenha só as linhas visíveis, para centenas de milhares de itens.
PropertyGrid (Free)
Edita as propriedades públicas de qualquer objeto, agrupadas por Category e rotuladas com DisplayName.
Arrastar
Sortable (Free)
Lista que pode ser reordenada arrastando, ou com os botões de mover para uso com teclado e toque.
Preferências
ThemeToggle (Free)
Chaves prontas para os temas Light, Dark, Slate e Slate Dark (ThemeToggle passa por eles um a um), a densidade confortável/compacta (DensityToggle) e o idioma en-US/bg-BG (LanguageToggle).
ThemeMenu (Free)
Uma lista suspensa para o tema e a densidade: Slate, Slate Dark, Desktop, Desktop Dark, Mist, Mist Dark, Dark e Light, cada um na densidade normal e compacta.
DensityToggle (Free)
LanguageToggle (Free)
Utilitários
BreakpointObserver (Free)
Informa ao seu código em qual ponto de quebra nomeado (Xs a Xxl) a janela está e renderiza de novo quando ele muda.
Fullscreen (Free)
Adiciona um botão que mostra seu conteúdo em tela cheia. Usa a API Fullscreen e uma camada de janela inteira em navegadores sem ela (alguns telefones).
Hotkey (Free)
Componente invisível que executa um retorno de chamada para um atalho de teclado como alt+k ou mod+shift+l (mod é Ctrl no Windows e Cmd no macOS).
InfiniteScroll (Free)
Carrega mais conteúdo quando o fim de uma lista entra em vista. Usa IntersectionObserver (com alternativa por rolagem) e dispara OnLoadMore; defina Loading enquanto busca e HasMore como false no fim.
ScrollToTop (Free)
Botão flutuante que aparece depois de rolar para baixo e volta ao topo da página.
Dados
DataGrid (Complete)
Tabela com ordenação (clique em um cabeçalho: crescente, decrescente, desligado), filtros por coluna, paginação, seleção de linhas e modelos.
TreeList (Complete)
Uma árvore cujos nós são linhas de tabela. Expandir e recolher, ordenar, filtrar e escolher colunas; o teclado segue o padrão WAI-ARIA treegrid.
PivotGrid (Complete)
Resume uma lista em uma tabela cruzada: campos nas linhas, campos nas colunas e números nas células, com subtotais, totais gerais e seletor de campos.
QueryBuilder (Complete)
Cria uma consulta a partir de grupos aninhados de condições, cada grupo combinado com AND ou OR.
DataFilter (Complete)
Cria um filtro a partir de condições (campo, operador, valor) e o devolve como predicado, então funciona com qualquer lista e com os itens do DataGrid.
FileExplorer (Complete)
Navegador de arquivos para um armazenamento que seu código fornece (um banco de dados, um disco ou a nuvem).
FileManager (Complete)
Árvore de pastas, caminho e visão em lista ou blocos dos arquivos da pasta atual, com busca, ordenação, nova pasta, renomear, excluir e enviar.
Gráficos
LineChart (Complete)
Gráfico de linhas com várias séries, suavização e preenchimento de área opcionais. Clique em uma entrada da legenda para ocultar ou mostrar uma série.
AreaChart (Complete)
Áreas empilhadas, percentuais e sobrepostas. As áreas empilhadas e percentuais são sólidas para que o total e as participações sejam fáceis de ler.
BarChart (Complete)
Barras agrupadas ou empilhadas, verticais ou horizontais, com valores negativos aceitos no modo agrupado.
ComboChart (Complete)
Barras e linhas em eixos compartilhados. Marque uma série com AsLine para desenhá-la como linha.
PieChart (Complete)
Gráfico de pizza ou de rosca. Fatias com valor zero ou menor são puladas, e as entradas da legenda ocultam fatias.
RadarChart (Complete)
Compara várias medidas de cada série em raios ao redor de um centro.
ScatterChart (Complete)
Pontos em dois eixos numéricos. Clique em uma entrada da legenda para ocultar uma série; os dados também ficam disponíveis como uma tabela oculta para leitores de tela.
BubbleChart (Complete)
Um gráfico de dispersão com uma terceira dimensão: a área de cada marcador quadrado segue o valor de tamanho.
Histogram (Complete)
Contagens de valores em faixas iguais, desenhadas como barras encostadas. Escolha o número de intervalos ou a largura de um intervalo e mostre contagens ou participações.
BoxPlot (Complete)
A dispersão de um grupo de números. A caixa é a metade central, a linha é a mediana, os bigodes chegam ao valor mais distante dentro de 1,5 vez a altura da caixa, e os quadrados isolados são valores atípicos.
HeatmapChart (Complete)
Grade de células cuja intensidade mostra o valor. O texto e a intensidade são escolhidos para manter o contraste nos dois temas.
CalendarHeatmap (Complete)
Um ano de dias como pequenos quadrados, uma coluna por semana, mais escuros onde o valor é maior.
TreemapChart (Complete)
Retângulos cujas áreas são proporcionais aos valores, dispostos com o algoritmo squarified.
SunburstChart (Complete)
Hierarquia como anéis concêntricos: cada anel é um nível e o ângulo de um arco é proporcional ao seu total.
SankeyChart (Complete)
Diagrama de fluxo: os nós são colocados em colunas pelo seu caminho e as larguras dos links são proporcionais à quantidade.
FunnelChart (Complete)
Etapas que se estreitam conforme seus valores, com a participação da primeira etapa.
WaterfallChart (Complete)
Um total acumulado com aumentos, reduções e totais. Verde e vermelho também se distinguem pelo sinal +/- em cada barra e na tabela de dados.
CandlestickChart (Complete)
Abertura, máxima, mínima e fechamento de cada período, com volume opcional. Um período de alta tem o corpo vazado e um de baixa o corpo preenchido, então o significado não depende só da cor.
Sparkline (Complete)
Pequena linha de tendência sem eixos, dimensionada para caber em texto ou células de tabela.
Gauge (Complete)
Medidor em arco para um único valor com faixas coloridas opcionais. Exposto às tecnologias assistivas como uma imagem rotulada com o valor.
LinearGauge (Complete)
Medidor reto para um único valor, horizontal ou vertical, com faixas coloridas opcionais.
BulletChart (Complete)
Progresso compacto em relação a uma meta: uma barra por medida com faixas qualitativas e uma marca de meta.
Map (Complete)
Um mapa desenhado como SVG simples a partir de GeoJSON. As regiões podem ser coloridas por um valor, os marcadores ficam em coordenadas, e o usuário pode selecionar uma região, dar zoom e mover.
ChartDataTable (Complete)
ChartLegend (Complete)
ChartToolbar (Complete)
Diagramas
Diagram (Complete)
Fluxogramas e organogramas desenhados como SVG. As caixas são posicionadas automaticamente em níveis a partir de suas conexões, ou nos X e Y que você informar.
Agendamento
Scheduler (Complete)
Visões de dia, semana, mês, agenda, ano e linha do tempo com eventos posicionados por hora, eventos sobrepostos lado a lado, arrastar e soltar para mover um evento, Shift com as setas como forma de usar o teclado.
SchedulerEventEditor (Complete)
O formulário usado pelo diálogo de evento do Scheduler: título, descrição, local, dia inteiro, início e fim, recurso, cor, lembrete, fuso horário e repetição.
RecurrenceEditor (Complete)
Edita uma regra de repetição (iCalendar RRULE): diária, semanal em dias escolhidos, mensal em um dia ou no n-ésimo dia da semana, anual; a cada N períodos; nunca, após um número de vezes ou até uma data.
Gantt (Complete)
Um plano de projeto: lista de tarefas à esquerda, barras em uma escala de tempo à direita, com subtarefas, progresso, marcos e dependências término-início.
Espaço de trabalho
Ribbon (Complete)
A barra de comandos no estilo Office: abas com grupos de comandos, abas contextuais, uma faixa de acesso rápido e um modo minimizado.
DockLayout (Complete)
Um espaço de trabalho de painéis. Os painéis se encaixam à esquerda, direita, topo, base ou centro, dividem uma área como abas, se recolhem em um trilho ou flutuam sobre o layout.
Window (Complete)
Uma janela flutuante não modal: mova, redimensione, minimize, maximize e abra várias ao mesmo tempo.
DashboardLayout (Complete)
Grade de blocos que o usuário move e redimensiona com o mouse, o toque ou o teclado (Alt com setas move, Alt com Shift redimensiona).
DesktopShell (Complete)
Um invólucro de aplicativo com uma camada de papel de parede e uma barra de tarefas embaixo. Os quatro temas de desktop (Desktop, Desktop Dark, Mist, Mist Dark) dão a ele cantos arredondados, sombras suaves e superfícies translúcidas.
Taskbar (Complete)
A barra no rodapé da página com uma região de início, o nome do módulo, uma região central e uma bandeja.
Kanban (Complete)
Quadro com colunas. Os cartões se movem arrastando ou com os botões de seta; o quadro dispara OnMove e você atualiza seus dados, então ele sempre reflete o seu estado.
Chat (Complete)
Lista de mensagens com campo de redação. A lista é uma região dinâmica que rola até a mensagem mais recente, o texto é sempre mostrado como texto simples, Enter envia e Shift+Enter adiciona uma nova linha (MultiLine=false deixa em uma linha só).
MailView (Complete)
Mostra o HTML de uma mensagem de e-mail vinda de fora. O HTML roda em um quadro isolado sem scripts, com uma política de segurança de conteúdo rígida, então não consegue tocar a página do aplicativo.
MessageEditor (Complete)
Um editor leve para escrever uma mensagem: negrito, itálico, sublinhado, listas, citação, link e limpar formatação, com uma chave para texto simples.
Office
PdfViewer (Complete)
Um visualizador para todas as versões de PDF até a 2.0 (ISO 32000-2): páginas contínuas, zoom e rotação, miniaturas, marcadores, busca, seleção de texto, links, anotações, campos de formulário, camadas, anexos.
PdfCompare (Complete)
Compara o texto de duas versões de um PDF página por página e lista o que foi adicionado, removido e alterado, lado a lado.
DocumentEditor (Complete)
Um processador de texto que abre e salva arquivos .docx (e o antigo .doc), Rich Text Format (.rtf) e OpenDocument (.odt).
RichTextEditor (Complete)
Um editor compacto de texto formatado dentro de um formulário: tem um Value como uma caixa de texto, mas o texto pode ser negrito, itálico, uma lista, um link, uma imagem ou uma tabela.
PresentationEditor (Complete)
Um editor de apresentações que abre e salva arquivos .pptx (e o antigo .ppt) e OpenDocument (.odp).
Spreadsheet (Complete)
Uma planilha completa: fórmulas e funções, formatação, células mescladas, painéis congelados, gráficos, formatação condicional, validação de dados, várias planilhas, desfazer e refazer, copiar e colar, preencher, ordenar.
ProofingPanel (Complete)
A lista de problemas de ortografia, gramática e lógica que o visualizador de PDF, o editor de documentos, a planilha e o editor de apresentações mostram.
DataGridSpreadsheetButton (Complete)
Um botão de barra de ferramentas para um DataGrid que salva as linhas da grade (todas as páginas, após filtrar e ordenar, só colunas visíveis) como um arquivo .xlsx.
DataGridPdfButton (Complete)
SchedulerPdfButton (Complete)
ReportButton (Complete)
SlideView (Complete)
PasswordPrompt (Complete)
Assistentes de IA
O RayCraft não tem recursos de IA próprios. A documentação é feita para que assistentes de código com IA a usem bem:
- Nomes de controles descritivos, por exemplo DatePicker, Autocomplete e Dialog.
- Uma página por controle com um resumo em linguagem clara e, na maioria dos controles, um pequeno exemplo.
- Um índice em texto simples de cada controle em llms.txt.
- Dados estruturados (JSON-LD) e uma descrição em cada página.
Confira o código gerado com a página do controle: um assistente ainda pode errar.