chayns components
v4.20.24
Um conjunto de belos componentes do React para desenvolver aplicativos Chayns®.
Primeiro, você deve instalar o pacote chayns-components em seu projeto:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components Os estilos de nossos componentes são fornecidos pela biblioteca chayns-css e alguns dos componentes também dependem da API chayns-js , para que você deva incluí-las no seu HTML:
<!-- CSS styles -->
< script
src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
version =" 4.2 "
> </ script >
<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > Os seguintes componentes fazem parte deste pacote:
| Componente | Descrição |
|---|---|
| Acordeão › | Os acordeões são seções dobráveis que são alternadas interagindo com um cabeçalho permanentemente visível. |
| Valecontrol › | O Controle de Valores é um controle de três segmentos usado para aumentar ou diminuir um valor incremental. |
| AnimationWrapper › | O AnimationWrapper fornece uma animação inicial atraente para seus filhos. |
| Distintivo > | Os crachás são pequenos recipientes circulares usados para decorar outros componentes com informações inflexíveis. |
| Bolha › | Uma bolha flutuante usada principalmente para alimentar o contexto de componentes ContextMenu e Tooltip . |
| Botão > | Os botões iniciam ações, podem incluir um título ou um ícone e vir com um conjunto de estilos predefinidos. |
| Calendário › | Um calendário de grade interativo que pode destacar datas especificadas. |
| Caixa de seleção › | As caixas de seleção permitem que os usuários concluam tarefas que envolvem fazer escolhas como a seleção de opções. Pode ser estilizado como um interruptor, uma alternância visual entre dois estados mutuamente exclusivos - ligado e desligado. |
| Colorpicker › | Permite um usuário escolher uma cor para texto, formas, ferramentas de marcação e outros elementos. |
| Colorscheme › | Ajusta o esquema de cores para todos os componentes infantis. |
| ComboBox › | Um botão com um suspensão que contém uma lista rolável de valores distintos dos quais as pessoas podem escolher. |
| ContextMenu › | Dá às pessoas acesso a funcionalidades adicionais relacionadas a itens na tela sem desordem a interface. |
| DateInfo › | Formatos de uma data ou data para ser facilmente legível e revela a data absoluta no mouse. |
| Emojiinput › | Uma entrada de texto que permite que os emojis sejam colocados. |
| ExpandableContent › | Uma seção dobrável que revela seus filhos com uma transição de altura. |
| FileInput › | Aceita tipos de arquivo especificados por diálogo ou arrastar e soltar. |
| FiltroButton › | Um componente semelhante ao chip usado para filtrar listas. Geralmente usado em um grupo de 2 ou mais. |
| FormattedInput › | Uma entrada de texto que formate automaticamente sua entrada com um formatador. Como esse componente é baseado no componente Input , é necessário um dos acessórios de Input , que não estão listados aqui. Esse componente funciona apenas como um componente não controlado, o que significa que não recebe um value -prop. |
| Galeria › | Uma galeria de imagens que exibe até quatro imagens por padrão. Também suporta a reordenação e exclusão de imagens e visualizações de imagem borrada para imagens carregadas do tsimg.cloud . |
| Ícone › | Exibe um ícone de fontawemome. |
| ImageAccordion › | Um acordeão que tem uma grande imagem e aparece em uma grade. Deve ser usado dentro de um ImageAccordionGroup . |
| ImageAccordionGroup › | Grupos vários componentes ImageAccordion , para que apenas um deles possa ser aberto por vez. |
| Entrada > | Uma entrada de texto que pode ser validada e decorada com designs diferentes. |
| Lista > | O invólucro para o ListItem -Component para criar listas. |
| ListItem › | Os itens em uma lista para exibir dados relacionados em um formato estruturado. Deve ser usado dentro de um componente List . |
| Times de abertura › | Uma entrada para os horários de funcionamento. |
| Personfinder › | Uma pesquisa de preenchimento automático de pessoas que podem ser personalizadas para trabalhar com dados arbitrários. |
| PositionInput › | Uma entrada de localização com um mapa e entrada de texto. Isso requer a API JavaScript do Google Maps com a biblioteca de lugares ativados. Você pode encontrar mais informações sobre a API de mapas aqui. |
| ProgressBar › | Uma barra de progresso animada que pode mostrar um progresso de ações ou um estado indeterminado como um spinner de carregamento. |
| Radiobutton › | Um botão de rádio que permite selecionar uma das várias opções. |
| RfidInput › | Um componente para obter um sinal RFID. |
| ScrollView › | Um contêiner rolável com uma barra de rolagem personalizada que fica ótima em todos os dispositivos. |
| Caixa de pesquisa › | Uma entrada de preenchimento automático para pesquisar uma lista de entradas. |
| SelectButton › | Um botão Escolha que abre uma caixa de diálogo de seleção quando clicado. |
| SelectItem › | Um botão de rádio que expande seu conteúdo quando selecionado. Deve ser usado dentro de uma SelectList . |
| SelectList › | Uma lista vertical de botões de rádio que revelam conteúdo quando selecionados. |
| SetupWizard › | Um conjunto de etapas pelas quais o usuário deve passar sequencialmente. |
| SetupWizardItem › | Um item que representa uma etapa em um SetupWizard . |
| Sharingbar › | Um menu de contexto para compartilhar um link e algum texto em várias plataformas. |
| Assinatura › | Um componente para permitir que o usuário se inscreva |
| Slider › | Uma faixa horizontal com um polegar que pode ser movido entre um valor mínimo e um valor máximo. |
| Sliderbutton › | Um conjunto linear de botões que são mutuamente exclusivos. |
| SmallwaitCursor › | Um pequeno indicador de carga circular. |
| Taginput › | Uma entrada de texto que permite que os valores sejam agrupados como tags. |
| Textarea › | Uma entrada de texto multilina que pode crescer automaticamente com seu conteúdo. |
| TextString › | Carrega as seqüências de texto do nosso banco de dados e as exibe. Lida com substituições e alterações da string via CTRL + Click (somente interno). |
| Tooltip › | Envolva um componente filho e exibe uma mensagem quando a criança estiver pairada ou clicada. Permite ser mostrado imperativamente ligando para .show() ou .hide() em sua referência. |
| Verificationicon › |
Também fornecemos um conjunto de funções de utilidade comuns:
| Função | Descrição |
|---|---|
| ImageUpload | Função para fazer upload de imagens para tsimg.cloud |
| ISTOBItEmployee | Obtenha as informações se o usuário for um funcionário da Tobit |
| CreateLinks | Cria uma string com links de uma string com URLs |
| Removahtml | Remove tags html de uma string |
| Colorutils | Funções de utilidade para converter valores de cores (hexadecimal, rgb, hsv) |
| equalizador | Funções de utilidade para equalizar a largura dos elementos HTML |
Se você deseja contribuir com os chayns-components , consulte o arquivo contribuinte.md.
