@praxisui/settings-panel 1.0.0-beta.8 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -1
- package/fesm2022/praxisui-settings-panel.mjs +1684 -196
- package/fesm2022/praxisui-settings-panel.mjs.map +1 -1
- package/index.d.ts +126 -9
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -1,6 +1,59 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Settings Panel"
|
|
3
|
+
slug: "settings-panel-overview"
|
|
4
|
+
description: "Visao geral do @praxisui/settings-panel com drawer de configuracao, contrato SettingsValueProvider, acoes Apply/Save e customizacao por tokens CSS."
|
|
5
|
+
doc_type: "reference"
|
|
6
|
+
document_kind: "component-overview"
|
|
7
|
+
component: "settings-panel"
|
|
8
|
+
category: "components"
|
|
9
|
+
audience:
|
|
10
|
+
- "frontend"
|
|
11
|
+
- "host"
|
|
12
|
+
- "architect"
|
|
13
|
+
level: "intermediate"
|
|
14
|
+
status: "active"
|
|
15
|
+
owner: "praxis-ui"
|
|
16
|
+
tags:
|
|
17
|
+
- "settings-panel"
|
|
18
|
+
- "drawer"
|
|
19
|
+
- "config-editor"
|
|
20
|
+
- "tokens"
|
|
21
|
+
- "ux"
|
|
22
|
+
order: 39
|
|
23
|
+
icon: "settings"
|
|
24
|
+
toc: true
|
|
25
|
+
sidebar: true
|
|
26
|
+
search_boost: 0.9
|
|
27
|
+
reading_time: 11
|
|
28
|
+
estimated_setup_time: 15
|
|
29
|
+
version: "1.0"
|
|
30
|
+
related_docs:
|
|
31
|
+
- "host-settings-panel-integration"
|
|
32
|
+
- "consumer-integration-quickstart"
|
|
33
|
+
- "host-integration-guide"
|
|
34
|
+
keywords:
|
|
35
|
+
- "praxis settings panel"
|
|
36
|
+
- "drawer editor"
|
|
37
|
+
- "settings value provider"
|
|
38
|
+
- "apply save close"
|
|
39
|
+
last_updated: "2026-03-07"
|
|
40
|
+
---
|
|
41
|
+
|
|
1
42
|
# @praxisui/settings-panel
|
|
2
43
|
|
|
3
|
-
Painel de
|
|
44
|
+
Painel de configuracoes baseado em drawer para hospedar editores de runtime com UX consistente de Apply, Save, Reset e Cancel.
|
|
45
|
+
|
|
46
|
+
## Documentation
|
|
47
|
+
|
|
48
|
+
- Documentação oficial: https://praxisui.dev
|
|
49
|
+
- Aplicação de referência: https://github.com/codexrodrigues/praxis-ui-quickstart
|
|
50
|
+
- Indicado para: apps host que precisam abrir editores embutidos com consistencia operacional e visual
|
|
51
|
+
|
|
52
|
+
## When to use
|
|
53
|
+
|
|
54
|
+
- Abrir editores de configuracao dentro do proprio app host
|
|
55
|
+
- Padronizar acoes de Apply, Save, Reset e Cancel em runtime
|
|
56
|
+
- Reduzir divergencias de UX entre diferentes editores do ecossistema Praxis UI
|
|
4
57
|
|
|
5
58
|
## Instalação
|
|
6
59
|
|
|
@@ -21,6 +74,30 @@ Peer dependencies (Angular v20):
|
|
|
21
74
|
- O componente implementa o contrato `SettingsValueProvider` para o painel habilitar/desabilitar ações do rodapé.
|
|
22
75
|
- O host observa `SettingsPanelRef.applied$` e `saved$` para aplicar/persistir mudanças.
|
|
23
76
|
|
|
77
|
+
## Customização visual (tokens CSS)
|
|
78
|
+
|
|
79
|
+
O painel respeita tokens M3 do app host (ex.: `--md-sys-color-*`, `--md-sys-elevation-level*`, `--md-sys-shape-corner-*`).
|
|
80
|
+
Se quiser ajustar layout/spacing sem alterar código, use as variáveis abaixo (em `:root` ou no container do painel).
|
|
81
|
+
|
|
82
|
+
Layout
|
|
83
|
+
- `--pfx-settings-panel-width`: largura padrão (default `720px`)
|
|
84
|
+
- `--pfx-settings-panel-width-expanded`: largura quando expandido (default `95vw`)
|
|
85
|
+
- `--pfx-settings-panel-max-width`: largura máxima quando expandido (default `2400px`)
|
|
86
|
+
- `--pfx-settings-panel-header-height`: altura do header (default `64px`)
|
|
87
|
+
- `--pfx-settings-panel-header-padding-x`: padding horizontal do header (default `16px`)
|
|
88
|
+
- `--pfx-settings-panel-header-gap`: gap entre itens do header (default `8px`)
|
|
89
|
+
- `--pfx-settings-panel-title-gap`: gap entre ícone e título (default `8px`)
|
|
90
|
+
- `--pfx-settings-panel-body-padding`: padding do corpo (default `8px 8px 24px 8px`)
|
|
91
|
+
- `--pfx-settings-panel-footer-padding`: padding do rodapé (default `12px 16px`)
|
|
92
|
+
- `--pfx-settings-panel-footer-gap`: gap entre botões do rodapé (default `12px`)
|
|
93
|
+
- `--pfx-settings-panel-button-gap`: gap entre ícone e texto em botões (default `8px`)
|
|
94
|
+
|
|
95
|
+
Sombras / backdrop
|
|
96
|
+
- `--pfx-settings-panel-header-shadow`: sombra do header (default `--md-sys-elevation-level1`)
|
|
97
|
+
- `--pfx-settings-panel-footer-shadow`: sombra do footer (default `--md-sys-elevation-level1`)
|
|
98
|
+
- `--pfx-backdrop`: cor do backdrop (default `--md-sys-color-scrim`)
|
|
99
|
+
- `--pfx-backdrop-blur`: blur do backdrop (default `6px`)
|
|
100
|
+
|
|
24
101
|
## API Principal
|
|
25
102
|
|
|
26
103
|
Serviço
|