Componentes
105 componentes
Todos os componentes, organizados pelo que fazem. Cada página tem exemplos ao vivo, o markup por trás deles e a API lida direto do código-fonte.
105 componentes
Formulário 30
- AutoCompleteUm campo que sugere enquanto você digita, com sugestões vindas da sua aplicação, um ou vários valores como chips e um botão para a lista inteira.
- CascadeSelectUm select para opções aninhadas, uma coluna por nível, que abre cada grupo ao lado do anterior.
- CheckboxUm checkbox nativo sob uma caixa desenhada, ligado a um booleano ou a um array de valores, com estado misto.
- ColorPickerUma amostra de cor que abre um painel de cores, com o valor em hex, RGB ou HSB e um slider de opacidade opcional.
- DatePickerUm campo de data em que se pode digitar ou escolher num calendário, lido no formato do locale.
- DateRangeDuas datas e os dias entre elas, escolhidas em dois meses lado a lado ou em um, com o intervalo desenhado antes de ser confirmado.
- EditorTexto rico com motor próprio e sem dependências: títulos, listas, tabelas, imagens, links e atalhos de Markdown, ligado como HTML sanitizado.
- FloatLabelUm label de verdade que começa dentro do campo e sai dele com o foco ou quando há valor; o IftaLabel o mantém dentro, acima do valor.
- FormValidação e envio montados a partir de partes que ligam valores, rótulos, dicas e erros a qualquer controle Vitral, com regras ou um schema.
- IconFieldUm ícone dentro de um campo, no início ou no fim, com o texto afastado dele.
- InputGroupCampos, botões e addons soldados num só controle, com cantos internos retos e uma única borda entre vizinhos.
- InputMaskUma caixa de texto em que se digita dentro de um padrão, como um telefone ou uma data, com os literais preenchidos para você.
- InputNumberUma caixa de número com botões de passo, limitada a um intervalo e formatada no locale, como decimal, moeda ou porcentagem.
- InputOtpUma caixa por caractere de um código de uso único, que avança enquanto você digita e se preenche de uma vez com colagem ou preenchimento automático.
- InputPasswordUma caixa de senha com botão de revelar e medidor de força.
- InputTagUm campo cujo valor é uma lista de strings curtas, cada uma mostrada como uma tag removível, adicionadas com Enter, um separador ou uma colagem.
- InputTextUma caixa de texto de uma linha cujos atributos vão para o input nativo, com prefixo, sufixo e botão de limpar.
- KnobUm dial para um número com limites, ajustado arrastando, clicando em qualquer ponto dele ou pelo teclado.
- LabelUm label nativo com a tipografia dos campos, que verifica para onde aponta e fica esmaecido quando esse controle está desabilitado.
- MultiSelectUm select para várias escolhas, mostradas como lista, contagem ou chips, com um filtro opcional.
- RadioButtonRadios nativos sob anéis desenhados, agrupados pelo RadioGroup com um só name e um só v-model.
- RatingEstrelas para avaliar, em passos inteiros ou em metades e quartos, limpas ao escolher de novo a mesma estrela.
- SelectEscolha uma opção de uma lista, com um filtro opcional que ignora maiúsculas e acentos.
- SelectButtonUm controle segmentado para uma escolha, como radio group, ou várias, como toggle buttons.
- SliderEscolha um valor, ou um intervalo, arrastando ao longo de uma trilha ou pelo teclado.
- TextareaUma caixa de texto de várias linhas, com o mesmo acabamento de campo do InputText, que pode crescer com o conteúdo.
- TimePickerUma hora do dia, digitada livremente ou escolhida numa lista, e guardada como minutos desde a meia-noite, e não como um Date.
- ToggleButtonUm botão que fica pressionado, com rótulos e ícones próprios para ligado e desligado.
- ToggleSwitchUm interruptor de ligar e desligar sobre um checkbox nativo, com cabeçalho acima e conteúdo de ligado/desligado ao lado.
- TreeSelectUm select sobre uma árvore, com o mesmo filtro e a mesma seleção por checkbox da Tree.
Botão 4
- ButtonUm comando em oito severidades, quatro variantes e três tamanhos, com ícones, estado de carregamento, badge e renderização como link.
- ButtonGroupBotões que andam juntos, unidos num só controle com nome, cada um com sua própria parada de tabulação.
- SpeedDialUm botão flutuante que abre suas ações em leque, em linha ou ao redor de um círculo.
- SplitButtonUm comando com um menu de comandos relacionados soldado a ele.
Dados 16
- ChartGráficos em SVG sem dependências, mais de vinte tipos a partir de um objeto de opções, com tooltips, legendas, zoom e grupos sincronizados, legíveis pelo teclado.
- DataGridUma tabela de dados que ordena, filtra, pagina e seleciona, localmente ou no seu servidor, com colunas que o leitor pode redimensionar, reordenar, fixar e ocultar.
- DataTableA tabela pequena: linhas já em mãos, ordenadas, zebradas e em tamanhos, com cabeçalho fixo. Quando precisar de mais, o DataGrid assume.
- DataViewOrdenação e paginação sobre um template seu para cada item, exibido em lista ou em grade.
- ListboxUma lista para escolher uma ou várias opções, sempre aberta: a irmã do Select.
- OrderListUma lista que o leitor põe em ordem, com botões, pelo teclado ou arrastando e soltando.
- OrganizationChartUma árvore desenhada como gráfico, com nós que se recolhem e abrem, podem ser selecionados e aceitam um template por tipo de nó.
- PaginatorNavega pelas páginas de um conjunto de dados, com botões de primeira, anterior, numeradas, próxima e última, e escolha de linhas por página.
- PickListDuas listas e os movimentos entre elas, com botões, pelo teclado ou com clique duplo, e reordenação dentro de cada uma.
- ScheduleUm calendário com visões de mês, semana, dia, agenda e linha do tempo por recurso, arrastar para mover e redimensionar, eventos recorrentes e qualquer fuso.
- SpreadsheetUma planilha com motor de fórmulas próprio e sem dependências: referências A1, sessenta e três funções e recálculo só do que mudou.
- TaskboardUm quadro kanban de cards em colunas e raias, arrastados com mouse, toque ou teclado, com limites de trabalho em andamento.
- TimelineEventos sobre um eixo, descendo a página ou atravessando-a, com o conteúdo de um lado, do outro ou alternando.
- TreeDados hierárquicos com ramos que abrem e fecham, seleção por clique ou checkbox, um filtro e filhos carregados sob demanda.
- TreeTableLinhas que se expandem em linhas, com ordenação que preserva o aninhamento e um filtro que mantém os ramos que levam às correspondências.
- VirtualScrollerRenderiza só os itens perto da viewport, então cem mil linhas custam o mesmo que uma tela cheia, com carregamento sob demanda.
Painel 9
- AccordionSeções empilhadas que abrem e fecham, uma por vez ou várias ao mesmo tempo, com cabeçalhos que seguem o accordion do WAI-ARIA.
- CardUm contêiner para um único conteúdo: uma imagem de cabeçalho opcional, título e subtítulo, o conteúdo e um rodapé de ações.
- DividerUma linha horizontal ou vertical entre conteúdos, sólida, tracejada ou pontilhada, com um conteúdo opcional encaixado nela.
- FieldsetUm fieldset nativo que dá nome aos controles de dentro e pode se recolher atrás da sua legenda.
- PanelUm contêiner com título que pode se recolher atrás do seu cabeçalho.
- ScrollPanelUm contêiner de rolagem com as barras finas do próprio tema, sobre a rolagem nativa.
- StepperPassos e seus painéis, na horizontal ou na vertical, com um modo linear opcional que deixa os passos seguintes fora de alcance.
- TabsVistas que dividem um mesmo lugar na página, trocadas por uma lista de abas.
- ToolbarUma fileira de controles em grupos de início, centro e fim, com navegação opcional pelas setas entre eles.
Sobreposição 8
- ConfirmDialogUma pergunta modal antes de uma ação, aberta de qualquer lugar com useConfirm, que pode deixar a resposta segura como padrão.
- ConfirmPopupUma confirmação ancorada ao elemento de que trata, aberta com useConfirm e segurando o foco até ser respondida.
- DialogUma janela sobre a página, modal ou não, que leva o foco para dentro, o mantém ali e o devolve ao fechar.
- DrawerUm painel que desliza de uma borda da viewport, ou a cobre inteira, com o mesmo comportamento modal do Dialog.
- DynamicDialogUm diálogo aberto por código com um componente como conteúdo, que recebe dados e fecha devolvendo um resultado.
- HoverCardUma prévia do destino de um link, mostrada enquanto o ponteiro repousa sobre ele ou o foco chega nele.
- PopoverUm diálogo não modal ancorado ao que o abriu, que fecha com Escape, um clique fora ou saindo com Tab.
- TooltipA diretiva v-tooltip: uma dica mostrada no hover e no foco do teclado, que descreve o elemento em que está.
Menu 10
- BreadcrumbOnde a página fica numa hierarquia: uma trilha de links com a página atual por último e separadores entre eles.
- CommandUm campo de busca sobre uma lista de comandos que filtra enquanto você digita, inline ou como uma paleta modal aberta por um atalho.
- ContextMenuO menu que um clique com o botão direito ou a tecla de menu de contexto abre, no ponteiro ou sob o elemento focado, com submenus.
- DockUma faixa de ícones grandes que crescem sob o ponteiro, cada um com seu rótulo num tooltip.
- MegaMenuUma barra de menu cujos itens abrem painéis largos de links agrupados em colunas, como a barra superior deste site.
- MenuUma lista de comandos e links, inline ou como popup, com grupos e separadores.
- MenubarA barra de menu da aplicação, com menus aninhados, que vira um único botão de menu em telas estreitas.
- PanelMenuSeções de navegação que se expandem no lugar, cada uma uma árvore dos seus itens, para uma barra lateral.
- SidebarA barra lateral recolhível da aplicação: navegação com sublistas, que se reduz aos ícones e vira uma gaveta em telas pequenas.
- TieredMenuUm menu cujos itens abrem submenus ao lado, em qualquer profundidade, inline ou como popup.
Mensagens 8
- BlockUIUm véu sobre uma região, ou sobre a página inteira, enquanto ela está ocupada, deixando inerte o que fica por baixo e dizendo o porquê.
- ChatUma conversa sem dependências, em cinco formatos, de uma thread simples a um agente com suas chamadas de ferramenta, com respostas que chegam no lugar.
- MessageUma mensagem inline com título, ação e botão de fechar, em todas as severidades.
- MeterGroupVários valores numa só barra, com uma legenda, lidos como um único total.
- ProgressBarQuanto de uma tarefa já foi feito, numa barra fina, com valor ou indeterminada.
- ProgressSpinnerUm anel que gira enquanto algo está em andamento, ou se preenche no sentido horário até um valor.
- SkeletonO contorno de um conteúdo que ainda está carregando, em qualquer formato, de uma linha de texto a um card inteiro.
- ToastNotificações enviadas de qualquer lugar com useToast, empilhadas na posição escolhida, que pausam o tempo enquanto estão sob o ponteiro ou em foco.
Mídia 7
- AspectRatioUma caixa que mantém a proporção quando a largura muda, com o conteúdo recortado para preenchê-la.
- AvatarUm rosto, iniciais ou um ícone numa caixa fixa, em três tamanhos e com badge opcional; o AvatarGroup sobrepõe uma fileira deles.
- CarouselUma trilha de itens com paginação e rotação opcional, que pausa quando pedido e enquanto você aponta para ela ou interage com ela.
- CropperUm retângulo de recorte sobre uma imagem, sem dependências: trave uma proporção, use uma máscara circular, gire e espelhe, e recorte no servidor ou no navegador.
- FileUploadUm input de arquivo desenhado como botão, área de soltar e fila, que verifica tipo, tamanho e quantidade, com progresso do envio.
- GalleriaImagens com miniaturas, indicadores, rotação e modo de tela cheia.
- ImageUma imagem que pode abrir num visualizador sobre a página, com giro e zoom.
Layout 7
- DockPanelEncaixa regiões nas bordas de cima, de baixo, esquerda e direita e dá o que sobra ao preenchimento; a ordem decide quem fica com os cantos.
- GridUma grade com dimensionamento em estrelas: linhas e colunas pelo conteúdo, em frações do que sobra ou em pixels, com filhos posicionados por linha e coluna.
- SplitterPainéis com uma divisória entre cada par que os redimensiona, arrastando ou pelo teclado, respeitando o mínimo de cada painel.
- SplitViewUm painel ao lado do conteúdo, inline ou em overlay, que pode se reduzir a uma faixa de ícones quando fechado.
- StackPanelOrganiza os filhos numa única linha, empilhados ou lado a lado, com espaçamento uniforme entre eles.
- UniformGridUma grade de células iguais que calcula as linhas ou as colunas pelo número de filhos.
- WrapPanelDispõe os filhos numa linha e passa para a seguinte quando ela enche, na horizontal ou na vertical, com um tamanho uniforme opcional.
Diversos 6
- BadgeUma contagem ou um ponto de status, sozinho ou preso no canto do que envolve, com o OverlayBadge.
- ChipUm elemento compacto para um filtro, um destinatário ou uma tag, com imagem, ícone e botão de remover opcionais.
- InplaceUma exibição que vira o seu editor quando ativada, e volta a ser exibição ao terminar.
- ScrollTopUm botão de voltar ao topo de uma página longa ou de um elemento com rolagem, que aparece depois de um limite.
- TagUm rótulo curto para um status ou uma categoria, em todas as severidades, com um botão de remover opcional.
- TerminalUm prompt e um log, para um console dentro de uma aplicação, com histórico de comandos.