Componentes

O LIP oferece um conjunto rico de componentes reutilizáveis e customizáveis para acelerar o desenvolvimento de aplicações.

Core Components

Button

Componente de botão com múltiplas variantes:

Componente Button - Exemplos de Usotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Input

Campo de entrada com validação:

Componente Input com Validaçãotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Modal

Janela modal responsiva:

Componente Modal - Janela Responsivatypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Form Components

Form

Gerenciamento de formulários com validação:

Componente Form - Gerenciamento Completotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Select

Dropdown com busca:

Componente Select - Dropdown com Buscatypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11

DatePicker

Seletor de data:

Componente DatePicker - Seleção de Datastypescript
Copiar
1
2
3
4
5
6
7
8
9
10

Data Display

Table

Tabela com paginação e ordenação:

Componente Table - Tabela com Paginaçãotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Card

Container com estilo de cartão:

Componente Card - Container Estilizadotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Tabs

Navegação por abas:

Componente Tabs - Navegação por Abastypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Chart

Gráficos e visualizações:

Componente Chart - Gráficos Interativostypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Feedback Components

Toast

Notificações temporárias:

Componente Toast - Notificações Temporáriastypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Alert

Mensagens de alerta:

Componente Alert - Mensagens de Alertatypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Progress

Barra de progresso:

Componente Progress - Barra de Progressotypescript
Copiar
1
2
3
4
5
6
7
8
9
10

Layout Components

Grid

Sistema de grid responsivo:

Componente Grid - Sistema Responsivotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Container

Container com largura máxima:

Componente Container - Layout Centralizadotypescript
Copiar
1
2
3
4
5
6
7

Advanced Components

DataGrid

Grade de dados avançada com edição inline:

Componente DataGrid - Grade Avançada de Dadostypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Chart

Gráficos e visualizações:

Componente Chart - Gráficos Interativostypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

FileUpload

Upload de arquivos com drag & drop:

Componente FileUpload - Upload com Drag & Droptypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13

Theme Customization

Personalize os componentes com temas:

Theme Customization - Personalização de Tematypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Acessibilidade

Todos os componentes seguem as diretrizes WCAG 2.1:

• Navegação por teclado: Suporte completo para Tab, Enter, Escape
• Screen readers: Atributos ARIA apropriados
• Contraste de cores: Mínimo de 4.5:1 para texto
• Focus visible: Indicadores claros de foco
• Responsive: Funcionam em todos os tamanhos de tela

Próximos Passos

• API - Documentação completa da API
• Melhores Práticas - Padrões recomendados
• Exemplos - Exemplos práticos de uso