@ttoss/layouts 0.11.21 → 0.11.22
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 +19 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -210,7 +210,7 @@ The inner `Container` uses the `layout.container` variant, which by default limi
|
|
|
210
210
|
|
|
211
211
|
### Custom Components with displayName
|
|
212
212
|
|
|
213
|
-
Create reusable layout components by preserving the required `displayName
|
|
213
|
+
Create reusable layout components by preserving the required `displayName`. This is necessary because the layout system detects components by their `displayName` — wrapping a layout component without preserving it will cause that slot to be invisible.
|
|
214
214
|
|
|
215
215
|
```tsx
|
|
216
216
|
const AppHeader = ({ children, ...props }) => (
|
|
@@ -222,8 +222,26 @@ const AppHeader = ({ children, ...props }) => (
|
|
|
222
222
|
);
|
|
223
223
|
|
|
224
224
|
AppHeader.displayName = Layout.Header.displayName; // Required for layout detection
|
|
225
|
+
|
|
226
|
+
const AppSidebar = ({ children }) => (
|
|
227
|
+
<Layout.Sidebar showSidebarButtonInDrawer>
|
|
228
|
+
<NavMenu />
|
|
229
|
+
{children}
|
|
230
|
+
</Layout.Sidebar>
|
|
231
|
+
);
|
|
232
|
+
|
|
233
|
+
AppSidebar.displayName = Layout.Sidebar.displayName; // Required for layout detection
|
|
225
234
|
```
|
|
226
235
|
|
|
236
|
+
All layout slot components have a `displayName` that must be preserved when wrapping:
|
|
237
|
+
|
|
238
|
+
| Component | Required `displayName` |
|
|
239
|
+
| ---------------- | ---------------------------- |
|
|
240
|
+
| `Layout.Header` | `Layout.Header.displayName` |
|
|
241
|
+
| `Layout.Sidebar` | `Layout.Sidebar.displayName` |
|
|
242
|
+
| `Layout.Main` | `Layout.Main.displayName` |
|
|
243
|
+
| `Layout.Footer` | `Layout.Footer.displayName` |
|
|
244
|
+
|
|
227
245
|
### Sidebar with Logo Slot
|
|
228
246
|
|
|
229
247
|
Add branding or controls to the sidebar area:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/layouts",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.22",
|
|
4
4
|
"description": "Layout components for React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"React"
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"jest": "^30.3.0",
|
|
33
33
|
"react": "^19.2.6",
|
|
34
34
|
"tsdown": "^0.22.0",
|
|
35
|
+
"@ttoss/components": "^2.14.21",
|
|
35
36
|
"@ttoss/config": "^1.37.13",
|
|
36
|
-
"@ttoss/test-utils": "^4.2.13",
|
|
37
|
-
"@ttoss/ui": "^6.9.20",
|
|
38
37
|
"@ttoss/react-icons": "^0.7.14",
|
|
39
|
-
"@ttoss/
|
|
38
|
+
"@ttoss/test-utils": "^4.2.13",
|
|
39
|
+
"@ttoss/ui": "^6.9.20"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": ">=16.8.0",
|