@net-advantage/nabs-ui-shell 0.38.0 → 0.40.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 +25 -0
- package/package.json +31 -31
package/README.md
CHANGED
|
@@ -22,6 +22,12 @@ export function Example() {
|
|
|
22
22
|
|
|
23
23
|
The shell package re-exports all Nabs UI control modules so your project can use a single package dependency and import surface.
|
|
24
24
|
|
|
25
|
+
This includes path-aware `Navigation` behavior from `nabs-ui-navigation`:
|
|
26
|
+
|
|
27
|
+
- Use `path` on navigation items to update the browser URL without a full page reload.
|
|
28
|
+
- Navigation can auto-select active items by matching `window.location.pathname`.
|
|
29
|
+
- Set `syncActivePath={false}` to disable automatic active matching.
|
|
30
|
+
|
|
25
31
|
## Branding
|
|
26
32
|
|
|
27
33
|
Use the `Branding` component to render a standard logo + title + byline lockup for shell headers.
|
|
@@ -48,6 +54,25 @@ export function HeaderBranding() {
|
|
|
48
54
|
- `byline`: React node rendered below the title.
|
|
49
55
|
- `className` and other standard `div` attributes are also supported.
|
|
50
56
|
|
|
57
|
+
## Navigation With Paths
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { Navigation } from "@net-advantage/nabs-ui-shell";
|
|
61
|
+
|
|
62
|
+
<Navigation
|
|
63
|
+
direction="vertical"
|
|
64
|
+
textAlignment="left"
|
|
65
|
+
items={[
|
|
66
|
+
{ id: "home", label: "Home", path: "/home" },
|
|
67
|
+
{ id: "components", label: "Components", path: "/components" },
|
|
68
|
+
{ id: "settings", label: "Settings", path: "/settings" },
|
|
69
|
+
]}
|
|
70
|
+
onItemSelect={(id) => console.log("selected", id)}
|
|
71
|
+
/>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
If the current URL path already matches one of the configured `path` values, that item is selected automatically.
|
|
75
|
+
|
|
51
76
|
## Props
|
|
52
77
|
|
|
53
78
|
- `header` renders the shell header area.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@net-advantage/nabs-ui-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.40.0",
|
|
4
4
|
"description": "Reusable React app shell for the Nabs UI library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/nabs-ui-shell.cjs",
|
|
@@ -27,36 +27,36 @@
|
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"react": "^19.0.0",
|
|
30
|
-
"@net-advantage/nabs-ui-accordion": "0.
|
|
31
|
-
"@net-advantage/nabs-ui-avatar": "0.
|
|
32
|
-
"@net-advantage/nabs-ui-buttons": "0.
|
|
33
|
-
"@net-advantage/nabs-ui-cards": "0.
|
|
34
|
-
"@net-advantage/nabs-ui-checkbox": "0.
|
|
35
|
-
"@net-advantage/nabs-ui-code": "0.
|
|
36
|
-
"@net-advantage/nabs-ui-combobox": "0.
|
|
37
|
-
"@net-advantage/nabs-ui-datepicker": "0.
|
|
38
|
-
"@net-advantage/nabs-ui-dialog": "0.
|
|
39
|
-
"@net-advantage/nabs-ui-dropdownlist": "0.
|
|
40
|
-
"@net-advantage/nabs-ui-dropdownmenu": "0.
|
|
41
|
-
"@net-advantage/nabs-ui-dynamicform": "0.
|
|
42
|
-
"@net-advantage/nabs-ui-fileupload": "0.
|
|
43
|
-
"@net-advantage/nabs-ui-graph": "0.
|
|
44
|
-
"@net-advantage/nabs-ui-grid": "0.
|
|
45
|
-
"@net-advantage/nabs-ui-layout": "0.
|
|
46
|
-
"@net-advantage/nabs-ui-markdown": "0.
|
|
47
|
-
"@net-advantage/nabs-ui-navigation": "0.
|
|
48
|
-
"@net-advantage/nabs-ui-panel": "0.
|
|
49
|
-
"@net-advantage/nabs-ui-radiobutton": "0.
|
|
50
|
-
"@net-advantage/nabs-ui-signature": "0.
|
|
51
|
-
"@net-advantage/nabs-ui-slider": "0.
|
|
52
|
-
"@net-advantage/nabs-ui-stepper": "0.
|
|
53
|
-
"@net-advantage/nabs-ui-tab": "0.
|
|
54
|
-
"@net-advantage/nabs-ui-textarea": "0.
|
|
55
|
-
"@net-advantage/nabs-ui-textbox": "0.
|
|
56
|
-
"@net-advantage/nabs-ui-themes": "0.
|
|
57
|
-
"@net-advantage/nabs-ui-themes-dark": "0.
|
|
58
|
-
"@net-advantage/nabs-ui-themes-light": "0.
|
|
59
|
-
"@net-advantage/nabs-ui-toolbar": "0.
|
|
30
|
+
"@net-advantage/nabs-ui-accordion": "0.40.0",
|
|
31
|
+
"@net-advantage/nabs-ui-avatar": "0.40.0",
|
|
32
|
+
"@net-advantage/nabs-ui-buttons": "0.40.0",
|
|
33
|
+
"@net-advantage/nabs-ui-cards": "0.40.0",
|
|
34
|
+
"@net-advantage/nabs-ui-checkbox": "0.40.0",
|
|
35
|
+
"@net-advantage/nabs-ui-code": "0.40.0",
|
|
36
|
+
"@net-advantage/nabs-ui-combobox": "0.40.0",
|
|
37
|
+
"@net-advantage/nabs-ui-datepicker": "0.40.0",
|
|
38
|
+
"@net-advantage/nabs-ui-dialog": "0.40.0",
|
|
39
|
+
"@net-advantage/nabs-ui-dropdownlist": "0.40.0",
|
|
40
|
+
"@net-advantage/nabs-ui-dropdownmenu": "0.40.0",
|
|
41
|
+
"@net-advantage/nabs-ui-dynamicform": "0.40.0",
|
|
42
|
+
"@net-advantage/nabs-ui-fileupload": "0.40.0",
|
|
43
|
+
"@net-advantage/nabs-ui-graph": "0.40.0",
|
|
44
|
+
"@net-advantage/nabs-ui-grid": "0.40.0",
|
|
45
|
+
"@net-advantage/nabs-ui-layout": "0.40.0",
|
|
46
|
+
"@net-advantage/nabs-ui-markdown": "0.40.0",
|
|
47
|
+
"@net-advantage/nabs-ui-navigation": "0.40.0",
|
|
48
|
+
"@net-advantage/nabs-ui-panel": "0.40.0",
|
|
49
|
+
"@net-advantage/nabs-ui-radiobutton": "0.40.0",
|
|
50
|
+
"@net-advantage/nabs-ui-signature": "0.40.0",
|
|
51
|
+
"@net-advantage/nabs-ui-slider": "0.40.0",
|
|
52
|
+
"@net-advantage/nabs-ui-stepper": "0.40.0",
|
|
53
|
+
"@net-advantage/nabs-ui-tab": "0.40.0",
|
|
54
|
+
"@net-advantage/nabs-ui-textarea": "0.40.0",
|
|
55
|
+
"@net-advantage/nabs-ui-textbox": "0.40.0",
|
|
56
|
+
"@net-advantage/nabs-ui-themes": "0.40.0",
|
|
57
|
+
"@net-advantage/nabs-ui-themes-dark": "0.40.0",
|
|
58
|
+
"@net-advantage/nabs-ui-themes-light": "0.40.0",
|
|
59
|
+
"@net-advantage/nabs-ui-toolbar": "0.40.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@types/react": "^19.0.0",
|