BTP-SMART-UI

Biblioteca de componentes de UI da BTP

Dentro do projeto da lib existe uma aplicação chamada Storybook a qual você ser executada para ajudar na visualização dos componentes.

    npm run storybook

Para utilizar os componentes é instanciar o UiModule.

import { UiModule } from 'btp-smart-ui'

@NgModule({
    imports: [ UiModule ]
})

Após instanciar o UiModule você terar acesso aos seguintes componentes:

Header

Tag utilizada no arquivo .html

 <btp-header title="Avarias" [links]="links">
 </btp-header>

Propriedades:

Propriedade	Tipo	Descrição
title (Obrigatório)	String	Texto que ira aparecer no accordion
links (Obrigatório)	Array de Links	Defini os links que serão mostrados no menu

Accordion

Tag utilizada no arquivo .html

 <btp-accordion title="Avarias">
    <conteudo do accordion></conteudo do accordion>
 </btp-button>

Propriedades:

Propriedade	Tipo	Descrição
Title (Obrigatório)	String	Texto que ira aparecer no accordion
color	String	Defini a cor do icone e do texto do accordion
background	String	Defini a cor de fundo do accordion
checkedBackground	String	Defini a cor de fundo do checked
hasCheck	Boolean	Defini se o accordion possui um check

Button

Tag utilizada no arquivo .html

 <btp-button>Nome do botão</btp-button>

Propriedades:

Propriedade	Tipo	Descrição
color	String	Defini a cor da fonte do botão
background	String	Defini a cor de fundo do botão
disabled	Boolean	Desabilita o click do botão
isFluid	Boolean	Defini se o botão ira ocupar todo o espaço do elemento pai
onButtonClick	Function	Callback a ser disparado quando o usuário clicar no botão

Textfield

Tag utilizada no arquivo .html

 <btp-textfield (value)="setValue($event)">
 </btp-textfield>

Propriedades:

Propriedade	Tipo	Descrição
type (Obrigatório)	String	o tipo do campo (Ex: "text", "number", etc)
value (Obrigatório)	String	Callback a ser disparado quando houver alteração no value do campo passa no parametro o texto atualizado
onInputBlur	Function	Callback a ser disparado quando o campo perder o focus
onInputFocus	Function	Callback a ser disparado no focus
onInputChange	Function	Callback a ser disparado quando o input tiver alguma mudança
color	String	Defini a cor do texto
background	String	Defini a cor de fundo do input
borderColor	String	Defini a cor da borda do input

Textarea

Tag utilizada no arquivo .html

 <btp-textarea (value)="setValue($event)"></btp-textarea>

Propriedades:

Propriedade	Tipo	Descrição
value (Obrigatório)	Function	Callback a ser disparado quando houver alteração no value do campo passa no parametro o texto atualizado
onInputBlur	Function	Callback a ser disparado quando o campo perder o focus
onInputFocus	Function	Callback a ser disparado no focus
onInputChange	Function	Callback a ser disparado quando o input tiver alguma mudança
color	String	Defini a cor do texto
background	String	Defini a cor de fundo do input
borderColor	String	Defini a cor da borda do input

Button Icon

Tag utilizada no arquivo .html

<btp-button-icon (onButtonClick)="onClick($event)">
    <i></i>
</btp-button-icon>

Propriedades:

Propriedade	Tipo	Descrição
color	String	Defini a cor do icone
background	String	Defini a cor de fundo do botão
disabled	Boolean	Desabilita o click do botão
onButtonClick	Function	Callback a ser disparado quando o usuário clicar no botão

Float Button

Tag utilizada no arquivo .html

 <btp-float-button>
    <i></i>
</btp-float-button>

Propriedades:

Propriedade	Tipo	Descrição
color	String	Defini a cor do icone
background	String	Defini a cor de fundo do botão
disabled	Boolean	Desabilita o click do botão
onButtonClick	Function	Callback a ser disparado quando o usuário clicar no botão

Footer

Tag utilizada no arquivo .html

 <btp-footer>
    <conteudo></conteudo>
 </btp-footer>

Propriedades:

Propriedade	Tipo	Descrição
background	String	Defini a cor de fundo da footer

Link

Propriedade	Tipo	Descrição
title (Obrigatório)	String	Texto que ira aparecer no accordion
to (Obrigatório)	String	Url para aonde deverar ser redirecionado no click
color	String	Defini a cor dos textos
background	String	Defini a cor de fundo da header e do menu
borderColor	String	Defini a cor da borda entre os links

---