0.0.9 • Published 4 years ago
btp-smart-ui v0.0.9
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 |