@cw-ui/sidepod v0.2.0

@cw-ui/sidepod

This package can change any time. Please only use if you are the ETC.Digital team.

Introdução

O componente SidePod é um painel sobreposto à tela no lado direito. É usado para mostrar mais detalhes sobre um determinado objeto ou pessoa.

Casos de uso

• Mostrando uma visualização do perfil de um usuário
• Mostrar informações detalhadas sobre uma transação (como uma sincronização ou execução)
• Mostrar definições de configuração que não precisam ser acessadas por um URL

Quando não usar o SidePod

• Evite mostrar o SidePod com base em um URL.

Exemplo básico

const SidepodBasicExample: FC = () => {
  return <SidePod size={12}/>
}

API

requerido

• isShown (boolean): Indicador que o SidePod está ou não aberto.
• closeEvent (function): Função que é chamada quando o botão Fechar é acionado.
• size (string): Largura do SidePod na tela
  • small define a largura em 400px
  • default define a largura em 460px
  • medium define a largura em 560px
  • large define a largura em 640px
• formSubmit (function): Função tipo EventForm que é chamada quando um botão tipo submit é clicado dentro do SidePod.

opcional

• title (string): apresenta o título no topo do Sidepod
• description (string): apresenta a descrição no topo do Sidepod
• footer (ReactNode): define um elemento React que será mostrado no rodapé do SidePod. Geralmente usado para colocar botões de Cancelar e Salvar.