jattac.libs.web.overflow-menu 0.0.18 → 0.0.19
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 +12 -45
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,10 +8,12 @@ This component provides a clean, modern, and accessible overflow menu suitable f
|
|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
|
-
- **Smooth Animations**: Built with Framer Motion for fluid, physics-based animations.
|
|
11
|
+
- **Smooth Animations**: Built with Framer Motion for fluid, physics-based animations, including a subtle wave animation and color change for the default icon.
|
|
12
12
|
- **Staggered Item Display**: Menu items animate in with a subtle "waterfall" effect.
|
|
13
13
|
- **Highly Customizable**: Easily change the trigger icon, menu item content, and functionality.
|
|
14
|
-
- **
|
|
14
|
+
- **Responsive Positioning**: Mobile-first design with desktop awareness, ensuring the menu positions correctly on various screen sizes and avoids cut-offs.
|
|
15
|
+
- **Enhanced Hover Effects**: Menu items feature modern background and foreground color changes on hover for clear visual feedback.
|
|
16
|
+
- **Item Separators**: Muted borders visually separate menu items, improving clarity and user experience.
|
|
15
17
|
- **Portal Support**: Optionally render the menu in a React Portal to avoid CSS stacking context issues.
|
|
16
18
|
- **Lightweight**: Simple and focused on providing a great overflow menu experience without unnecessary bloat.
|
|
17
19
|
|
|
@@ -25,8 +27,6 @@ npm install jattac.libs.web.overflow-menu react react-dom framer-motion
|
|
|
25
27
|
|
|
26
28
|
## Getting Started
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
30
|
Here's a basic example to get you up and running quickly.
|
|
31
31
|
|
|
32
32
|
```jsx
|
|
@@ -128,53 +128,20 @@ const richMenuItems: IOverflowMenuItem[] = [
|
|
|
128
128
|
|
|
129
129
|
---
|
|
130
130
|
|
|
131
|
-
##
|
|
131
|
+
## Styling and Customization
|
|
132
132
|
|
|
133
|
-
The component
|
|
133
|
+
The component's styling is primarily controlled via its internal CSS module (`OverflowMenu.module.css`). While direct customization through CSS variables is no longer supported, you can override the component's default styles by targeting its CSS classes in your own stylesheets.
|
|
134
134
|
|
|
135
|
-
|
|
135
|
+
For example, to change the background of the menu:
|
|
136
136
|
|
|
137
137
|
```css
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
--ofm-bg: rgba(255, 255, 255, 0.75);
|
|
142
|
-
--ofm-bg-blur: 12px;
|
|
143
|
-
--ofm-border-radius: 12px;
|
|
144
|
-
--ofm-item-border-radius: 8px;
|
|
145
|
-
--ofm-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
146
|
-
--ofm-border: 1px solid rgba(2, 75, 89, 0.15);
|
|
147
|
-
--ofm-item-hover-bg: rgba(2, 75, 89, 0.05);
|
|
148
|
-
--ofm-item-active-bg: rgba(2, 75, 89, 0.1);
|
|
138
|
+
/* In your application's CSS file */
|
|
139
|
+
.your-custom-wrapper-class .OverflowMenu-module_menu__n8uKD { /* Use the hashed class name from your build output */
|
|
140
|
+
background: #f0f0f0; /* Your desired background */
|
|
149
141
|
}
|
|
150
142
|
```
|
|
151
|
-
|
|
152
|
-
**Example: Creating a Dark Theme**
|
|
153
|
-
|
|
154
|
-
To apply a dark theme, create a CSS class that overrides these variables and apply it to a parent element.
|
|
155
|
-
|
|
156
|
-
*Your CSS file:*
|
|
157
|
-
```css
|
|
158
|
-
.dark-theme {
|
|
159
|
-
--ofm-text-color: #e0e0e0;
|
|
160
|
-
--ofm-text-hover-color: #ffffff;
|
|
161
|
-
--ofm-bg: rgba(40, 40, 40, 0.8);
|
|
162
|
-
--ofm-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
163
|
-
--ofm-item-hover-bg: rgba(255, 255, 255, 0.1);
|
|
164
|
-
--ofm-item-active-bg: rgba(255, 255, 255, 0.15);
|
|
165
|
-
}
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
*Your JSX file:*
|
|
169
|
-
```jsx
|
|
170
|
-
import './your-styles.css';
|
|
171
|
-
|
|
172
|
-
// ...
|
|
173
|
-
<div className="dark-theme">
|
|
174
|
-
<OverflowMenu items={menuItems} />
|
|
175
|
-
</div>
|
|
176
|
-
```
|
|
143
|
+
*Note: The exact hashed class names (e.g., `OverflowMenu-module_menu__n8uKD`) will depend on your build process. You may need to inspect the rendered HTML to find them.*
|
|
177
144
|
|
|
178
145
|
## License
|
|
179
146
|
|
|
180
|
-
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
|
147
|
+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
package/package.json
CHANGED