mamba-layout 0.45.0 → 0.46.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 +60 -1
- package/dist/layout.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,7 +12,8 @@ Shared Mamba Vue layout shell, styles, locale helpers, and a standalone browser
|
|
|
12
12
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
13
13
|
<title>My App</title>
|
|
14
14
|
<link type="text/css" rel="stylesheet" href="https://at.alicdn.com/t/c/font_4614982_ta3fsffdp7.css" />
|
|
15
|
-
<link rel="stylesheet" href="
|
|
15
|
+
<link type="text/css" rel="stylesheet" href="https://at.alicdn.com/t/c/font_4839395_zeh0j9u8an.css" />
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mamba-layout@latest/dist/layout.css" />
|
|
16
17
|
<style>
|
|
17
18
|
html, body, mamba-layout {
|
|
18
19
|
width: 100%;
|
|
@@ -94,3 +95,61 @@ To customize dark mode colors for your content:
|
|
|
94
95
|
--ui-radius-control /* Border radius for controls */
|
|
95
96
|
--ui-shadow-card /* Card shadow */
|
|
96
97
|
```
|
|
98
|
+
|
|
99
|
+
### AI Usage Guidelines
|
|
100
|
+
|
|
101
|
+
**⚠️ Important for AI Code Generation:**
|
|
102
|
+
|
|
103
|
+
When using Mamba Layout, **DO NOT** generate the following components as they are already provided by the `<mamba-layout>` element:
|
|
104
|
+
|
|
105
|
+
- ❌ **Sidebar/Navigation Menu** - The layout includes a built-in sidebar with navigation
|
|
106
|
+
- ❌ **Top Header Bar** - The layout includes a built-in header with logo and actions
|
|
107
|
+
- ❌ **Layout Structure** - Do not create flex/grid containers for overall page layout
|
|
108
|
+
- ❌ **Theme Toggle Button** - Dark mode is handled automatically by the layout
|
|
109
|
+
|
|
110
|
+
**What to generate:**
|
|
111
|
+
|
|
112
|
+
- ✅ **Page Content Only** - Place your actual page content inside `<mamba-layout>` tags
|
|
113
|
+
- ✅ **Data Cards** - Statistics cards, metric displays
|
|
114
|
+
- ✅ **Charts & Visualizations** - Data charts, graphs
|
|
115
|
+
- ✅ **Tables** - Data tables, lists
|
|
116
|
+
- ✅ **Forms** - Input forms, filters
|
|
117
|
+
- ✅ **Custom Components** - Any business-specific UI components
|
|
118
|
+
|
|
119
|
+
**Example for AI Prompts:**
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
Create a dashboard page with statistics cards and charts using Mamba Layout.
|
|
123
|
+
Only generate the page content that goes inside the <mamba-layout> element.
|
|
124
|
+
Do NOT create sidebar, header, or navigation as they are provided by the layout.
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Correct Usage:**
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<mamba-layout>
|
|
131
|
+
<!-- Only your page content here -->
|
|
132
|
+
<div class="dashboard-content">
|
|
133
|
+
<h1>Data Dashboard</h1>
|
|
134
|
+
<div class="stats-grid">...</div>
|
|
135
|
+
<div class="charts">...</div>
|
|
136
|
+
</div>
|
|
137
|
+
</mamba-layout>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
**Incorrect Usage (what NOT to do):**
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<mamba-layout>
|
|
144
|
+
<!-- ❌ Don't create your own sidebar -->
|
|
145
|
+
<aside class="sidebar">...</aside>
|
|
146
|
+
|
|
147
|
+
<!-- ❌ Don't create your own header -->
|
|
148
|
+
<header class="top-bar">...</header>
|
|
149
|
+
|
|
150
|
+
<!-- ❌ Don't create layout containers -->
|
|
151
|
+
<div style="display: flex;">
|
|
152
|
+
<main>...</main>
|
|
153
|
+
</div>
|
|
154
|
+
</mamba-layout>
|
|
155
|
+
```
|