@wizsolucoes/wiz-tabs NPM

Wiz solucoes

✨ Wiz Tabs

Organizam o conteúdo em vistas separadas, onde apenas uma vista pode ser visível por vez. Seguindo o design system Sys da Wiz.

Como usar

instala o pacote

npm i @wizsolucoes/wiz-tabs

Frameworks	Link
Angular	Link
React	Link
Vue	Link

outros

Componente html

 <wiz-tabs vertical="false">
    <wiz-tab type="horizontal" (openEvent)="openEvent($event)" eventValue='teste' active="false">Nome da tab</wiz-tab>
    <wiz-tab type="horizontal" (openEvent)="openEvent($event)" eventValue='teste' active="true">Nome da tab</wiz-tab>
  </wiz-tabs>

Obs: Se estiver trabalhando com algum framework e seus parâmetros forem dinâmicos devem ser feitos em forma diferente dependendo do framwork assista o vídeo abaixo para entender melhor. Web Componentes atributos em framework

🧾 Parâmetros

wiz-tabs

Parâmetro	Obrigatório	tipagem	Default	Observação
vertical	Sim	Boolean	false	Seleção de posicionamento da tab.

wiz-tab

Parâmetro	Obrigatório	tipagem	Default	Observação
type	Sim	String	null	Seleção de posicionamento do li da tab (vertical ou horizontal)
(returnEvent)="teste($event)"	Não	function	null	Eventemitter
eventValue	Sim	string	null	Valor emitido no click
active	Sim	Boolean	null	Adicionar classe active no li